jQuery stop(true, true) 跳转到队列中所有动画的末尾答案

【问题标题】：jQuery stop(true, true) to jump to end of all animations in queuejQuery stop(true, true) 跳转到队列中所有动画的末尾
【发布时间】：2012-04-02 14:30:45
【问题描述】：

我一直在使用 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);

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

【问题讨论】：

标签： javascript jquery animation queue

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

jQuery 1.9 引入了.finish() 方法，正是它实现了这一点。

【讨论】：

【解决方案3】：

我还从 jQuery 1.9 中的 .finish() 方法的文档中注意到

通过设置属性 $.fx.off 可以全局停止动画为真。完成后，所有动画方法将立即调用时将元素设置为最终状态，而不是显示效果。

.finish() 文档页面上还有各种方法的精彩演示。

【讨论】：

【解决方案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();
    });
});

【讨论】：