问题 Jquery排队动画

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

我希望它们按顺序发生。

我不想这样做：

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

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

9462

2018-03-20 21:36

起源

答案:

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

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

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

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

function startAnimation() {
  showFirst();
}

2018-03-20 21:42

我真的不需要这个队列，它只会使组织代码更好1000x。我不明白为什么没有像$（func）.joinUniversalQueue（）中的任何函数的包装器;哇....这正是我想要的，编写这样的方法/插件会很容易。我会这样做的。 - thirsty93

第二个想法，$ .joinUniversalQueue（func）;会容易得多 - thirsty93

答案:

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

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

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

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

function startAnimation() {
  showFirst();
}

2018-03-20 21:42

第二个想法，$ .joinUniversalQueue（func）;会容易得多 - thirsty93

看看文件对于jQuery效果。关于的东西排队应该做你需要的。

2018-03-20 21:47

我相信那些只适用于一个元素 - cobbal

从我读过的内容来看，cobbal是正确的 - thirsty93

我刚刚用过这个插件 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();
    });
});

2018-03-21 05:00

这些计时器会停止执行，直到动画结束吗？ - thirsty93

不，我用它们将动画链接在一起，以便一个开始而另一个完成。 - jfar

这也行得通。

            $('#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 这里

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

-2

2018-06-04 13:55

有时会有开销，而另一个则完成另一个（不可预测）。对于某些动画，顺序可能很重要。排队确保第二个动画在第一个动画完成时开始。 - Ryan Taylor

@Ryan Taylor不太确定时间如何下降。确实，由于CPU负载等原因，浏览器不能保证精确的毫秒数，但我的理解是执行顺序是有保证的。我已经更新了这个答案，无论如何还包括另一个选项。并记住，正确的方法，这是他不想做的方式:)，只是提供替代方案。 - Ben

setTimeout是veeeeeeeeeeeeery不可靠用于动画。它是一个异步函数，可以为初学者带来数小时的调试麻烦 - user151496

问题 Jquery排队动画

答案:

答案:

热门问题