Question

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

我希望它们按顺序发生。

我不想这样做：

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

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

Answer 1

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

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

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

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

function startAnimation() {
  showFirst();
}

Answer 2

查看jQuery效果的documentation。关于queuing的内容应该做你需要的。

Answer 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();
    });
});

Answer 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);

Jquery排队动画

4 个答案: