Question

多次单击按钮时停止多个动画，直到动画在下面的代码的帮助下完成声明一个全局变量

var animateFinish = true;

在这里，我开始点击动作

$('#button').on('click', function(e){
    if(animateFinish){
        animateFinish = false;
        $('.selector').animate({'margin-left':'100px'},"fast",'linear',function(){  
             animateFinish = true;
        }
    }  
}

1。全局声明变量为True（animateFinish） 2.第一次满足条件 3.立即修改为假 4.完成动画后，它将被恢复 5.现在，如果你检查它，直到动画完成，事件将不会动画抱歉我的英文。

Answer 1

就您个人而言，我可能会使用全局变量var busy = false，然后在您的点击中添加此项：if(busy) return; else busy = true;。在动画结束时，将busy设置为false。这将阻止你的点击做任何事情，直到一切都完成。

这是一个显示我的意思的快速片段：

＆＃13;

/* I use each here so that `busy` is only applied to each div individually.
 * That way every individual element has it's own `busy`. */
$("div").each(function(){
    var busy = false;
    $(this).click(function(){
        /* Abort the click operation if busy is active*/
        if(busy) return; else busy = true;
        /* Run the animation and deactivate busy on callback. */
        $(this).animate({left: 500}, 2000).animate({left:0}, 2000, function(){
            busy = false;
        });
    });
});

＆＃13;

div {
  position: absolute;
  left: 0;
  top:0;
  background: red;
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div>Click me!</div>

＆＃13;

停止多个动画，直到另一个动画完成

1 个答案: