jQuery - 如何使用双动画防止动画队列堆积？答案

【问题标题】：jQuery - How to Prevent Animation Queue Buildup with Double Animations?jQuery - 如何使用双动画防止动画队列堆积？
【发布时间】：2009-12-23 01:54:59
【问题描述】：

我在这里查看本教程以防止动画堆积：

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

我的情况：我正在做一个像下面这样的双重动画，并希望防止动画建立。由于我有 2 个动画，它似乎忽略了 .stop()。可以做些什么来防止这种情况发生？我在 .animate 上都尝试过 .stop() ，如果我这样做了，它会停止动画......

$(document).ready(function() {
$('#element').hover(function() {
    $(this).stop()
        .animate(
            { left: 200 }, {
                duration: 'slow',
            })
        .animate(
            { top: 200 }, {
                duration: 'slow',
            });
} , function() {
    $(this).stop()
        .animate(
            { left: 0 }, {
                duration: 'slow',
            })
        .animate(
            { top: 0 }, {
                duration: 'slow',
            });
});

});

任何帮助将不胜感激！

【问题讨论】：

标签： jquery animation

【解决方案1】：

用途：

$(this).stop(true);

来自stop()：

停止所有当前正在运行的所有指定的动画元素。

注意：“当前运行”没有排队，正如您所遇到的那样。为此提供参数：

clearQueue (Optional) Boolean 
设置时的布尔值（真/假）为 true 清除动画队列，有效地停止所有排队动画。

您还可以提供第二个参数，该参数将快捷地完成动画，而不是在有帮助的情况下取消它。

【讨论】：

【解决方案2】：

您应该使用不会破坏布局的.finish()。

【讨论】：