Question

我一直在使用jQuery的stop(true, true)方法来清除正在运行的动画，以便下一个立即启动。我注意到第一个参数clearQueue清除了整个动画队列，但第二个参数jumpToEnd只跳转到当前运行的动画的末尾，而不是从队列中删除的动画。有没有办法让它清晰并跳到所有排队动画的结尾？

我最终链接了几个stop(false, true)来电，但这只会处理3个排队的动画，例如。

$(this)
  .stop(false, true)
  .stop(false, true)
  .stop(false, true)
  .addClass('hover', 200);

修改

根据Ates Goral的回答，我最后添加了自己的方法stopAll：

$.fn.extend({ stopAll: function () {
    while (this.queue().length > 0)
      this.stop(false, true);
    return this;
  } });

$(this).stopAll().addClass('hover', 200);

我希望其他人觉得这很有用。

Answer 1

链接多个stop(false, true)是有道理的。您可以检查队列长度，而不是对固定数量的链式调用进行硬编码：

while ($(this).queue().length) {
    $(this).stop(false, true);
}

演示：http://jsfiddle.net/AB33X/

Answer 2

jQuery 1.9引入了.finish()方法，实现了这一目标。

Answer 3

我还注意到jQuery 1.9中.finish（）方法的文档

Animations may be stopped globally by setting the property $.fx.off 
to true. When this is done, all animation methods will immediately 
set elements to their final state when called, rather than displaying an effect.

在.finish()文档页面上还有一个很好的各种方法演示。

Answer 4

在开始新动画之前测试是否存在类（在悬停时设置并在mouseOut动画回调中删除）。当新动画开始时，出列队列。

$("div").hover(function(){
    if (!$(this).hasClass('animated')) {
        $(this).dequeue().stop().animate({ width: "200px" });
    }
}, function() {
    $(this).addClass('animated').animate({ width: "100px" }, "normal", "linear", function() {
        $(this).removeClass('animated').dequeue();
    });
});

jQuery stop（true，true）跳转到队列中所有动画的结尾

4 个答案: