Jquery排队动画答案

【问题标题】：Jquery queueing animationsJquery排队动画
【发布时间】：2010-10-14 15:55:38
【问题描述】：

我有几个动画想要在 dom 中的不同对象上执行。

我希望它们按顺序发生。

我不想这样：

$('#first').show(800, function () 
{ $('#second').show(800, function () {...etc...});

我想将我所有的动画（和 CPU 密集型功能）添加到某种队列对象中，以确保它们按顺序执行。

【问题讨论】：

标签： javascript jquery queue

【解决方案1】：

我不确定您为什么不想使用您描述的方法。如果纯粹从组织的角度来看，您不必使用匿名函数

function showFirst() {
  $('#first').show(800, showSecond);
}

function showSecond() {
  $('#second').show(800, showThird);
}

function showThird() {
  $('#third').show(800);
}

function startAnimation() {
  showFirst();
}

【讨论】：

我并不真正需要这个队列，它只会让代码组织好 1000 倍。我不明白为什么 $(func).joinUniversalQueue(); 中的任何函数都没有包装器；哇....这正是我想要的，编写这样的方法/插件会很容易。我就这么做。
转念一想，$.joinUniversalQueue(func);会容易得多

【解决方案2】：

查看documentation 了解 jQuery 效果。 queuing 的内容应该能满足你的需求。

【讨论】：

【解决方案3】：

前几天我刚刚使用了这个插件http://plugins.jquery.com/project/timers 来做类似的事情。您基本上遍历所有匹配的 dom 元素，然后在索引 * 您的毫秒数时每个执行一个动画。

代码是这样的：

HTML：

<div id="wrapper">
   <div>These</div>
   <div>Show</div>
   <div>In</div>
   <div>Order</div>
</div>

jQuery

$("#wrapper div").foreach( function(i) {
    i = i + 1;
    $(this).oneTime(800 * i, "show", function()  {
        $(this).show();
    });
});

【讨论】：

这些计时器会在动画结束之前停止执行吗？
不，我用它们将动画链接在一起，这样一个开始，另一个结束。

【解决方案4】：

这也可以。

            $('#first').show(800);
            setTimeout("$('#second').show(800)", 800);
            setTimeout("$('#third').show(800)", 1600);
            setTimeout("$('#forth').show(800)", 2400);

我知道它不是纯粹的顺序，但我发现它更易于阅读，并允许您更灵活地设置动画。

注意：您必须引用要执行的代码。我在前面的代码中没有使用任何双引号，但如果你这样做了，你会像下面这样对它们进行转义。

            $('#first').animate({"width":"100px"}, 500);
            setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800);
            setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600);
            setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400);

您通常可以通过交替使用引号来避免这种情况，但值得一提。

更新：这是另一种选择，也值得一试 jquery promises here

            $('#first').show(800);
            $('#second').delay(800).show(800);
            $('#third').delay(1600).show(800);
            $('#forth').delay(2400).show(800);

【讨论】：

有时会有开销，一个在另一个之前完成（不可预测）。对于某些动画来说，顺序可能很重要。排队确保第二个动画在第一个动画完成时开始。
@Ryan Taylor 不太确定时机如何。确实，由于 cpu 负载等原因，浏览器无法保证精确的毫秒，但我的理解是保证执行顺序。无论如何，我已经更新了这个答案以包含另一个选项。请记住，这样做的正确方法是他不想这样做的方式:)，只是提供替代方案。
setTimeout 非常不可靠，无法用于动画。这是一个异步函数，对于初学者来说可能会花费数小时的调试时间