Javascript JS：切换元素'；眨眼

假设我有一些id=“circle”的元素和一些id=“button”的按钮。我需要做的就是：

圆圈默认闪烁

当用户按下按钮时，圆圈停止闪烁

当用户再次按下按钮时，圆圈开始闪烁

等等

我正在尝试使用以下代码执行此操作：

var闪烁=真；
功能闪存（elementId）{
var bl=document.getElementById（elementId）；
bl.style.visibility=bl.style.visibility==“隐藏”？“可见”：“隐藏”；
}
函数按钮单击（）{
如果（闪烁）{
清除间隔（闪光（‘圆圈’）；
}否则{
设置间隔（闪光（'圆圈'），200）；
}
}		
设置间隔（闪光（'圆圈'），200）

&x25cf


切换
您正在调用
flash
方法，而需要提供对
setIterval
的回调。您还应该为某个变量存储一个区间处理程序，并在调用clearInterval时使用它。代码中缺少的最后一件事是在每次单击时切换
闪烁
布尔值

var interval;
function buttonClick() {
  if (blinking) {
    clearInterval(interval);
  } else {
    interval = setInterval(flash.bind(null, 'circle'), 200);
  }
  blinking = !blinking;
}
buttonClick();

或者您可以简单地使用
函数（）{}
，如下所示：

interval = setInterval(function() {
    flash('circle');
}, 200);

此代码与
jquery
和
css
一起使用：

css：

@keyframes blink {
0%{opacity: 0.0;}
50%{opacity: 1.0;}
100%{opacity: 0.0;}
}
.circle {
display: inline-block;
background: #f00;
width:30px;
height:30px;
border-radius:15px;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}
.circle.blinker {
 animation: blink .3s infinite;
}
.jdhf {
 background: blue;
}

以及jquery：

$("*").on("click","#button", function(e){
e.stopPropagation();
//verify if the div is blinking and then stop blinking
var f=$(".blinker").length;
if(f>0){
$("#circle").removeClass("blinker");
}
else {
$("#circle").addClass("blinker");
}
});

html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="circle" class="circle blinker">
</div>
<button id="button" class="jdhf">
Toggle animation
</button>


切换动画

请在此处尝试：
由于toggle不再用于两个函数，您需要设置一个变量（类或隐藏标记）进行切换。这个例子显示了隐藏的输入，而不是一个变量（因为布尔变量对于多个按钮来说是不灵活的，并且使用不透明闪烁作为一个很酷的选项，我在堆栈的其他地方找到了这个选项）

<div id="circle">
    text
</div>
<div id="button">
    <input type="hidden" value=0 />
    button
</div>
<script>
    var circle = setInterval(function(){blink()}, 1000);
    function blink() {
        $("#circle").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }
    $("#button").click(function() {
        var a = $(this).find("input[type='hidden']").val() == 0 ? 1 : 0;
        if ( a == 1 ) {
            clearInterval(circle);
        }else {
            circle = setInterval(function(){blink()}, 1000);
        }
        $(this).find("input[type='hidden']").val(a);
    });
</script>


文本
按钮
var circle=setInterval（函数（）{blink（）}，1000）；
函数blink（）{
美元("圆圈").法德托(100,0.1).法德托(200,1.0),；
}
$（“#按钮”）。单击（函数（）{
var a=$（this.find（“输入[type='hidden']”）。val（）==0？1:0；
如果（a==1）{
间隙（圆）；
}否则{
圆圈=设置间隔（函数（）{blink（）}，1000）；
}
$（this.find（“input[type='hidden']”）val（a）；
});
谢谢您的帮助，但这段代码也不起作用：它起作用了，只是JSFIDLE“bug”（无法从HTML代码中访问JS方法）。您需要添加css。隐藏{display:none}，请参阅fiddle示例
<div id="circle">
    text
</div>
<div id="button">
    <input type="hidden" value=0 />
    button
</div>
<script>
    var circle = setInterval(function(){blink()}, 1000);
    function blink() {
        $("#circle").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }
    $("#button").click(function() {
        var a = $(this).find("input[type='hidden']").val() == 0 ? 1 : 0;
        if ( a == 1 ) {
            clearInterval(circle);
        }else {
            circle = setInterval(function(){blink()}, 1000);
        }
        $(this).find("input[type='hidden']").val(a);
    });
</script>