连续运行 jQuery 动画答案

【问题标题】：Running jQuery animations serially连续运行 jQuery 动画
【发布时间】：2011-10-06 18:51:25
【问题描述】：

我有一组淡出动画，之后我想运行一组animation 调用。

如何确保一个在另一个之后运行？

如果我这样做：

$(div1).fadeOut(600);
$(div2).fadeOut(600);
$(div3).fadeOut(600);

$(div4).animation({opacity:1},600);
$(div5).animation({opacity:1},600);
$(div6).animation({opacity:1},600);

动画并行运行。

上面的代码只是问题的简化/抽象。我无法将所有调用组合在一个函数中，并且在现实生活中存在数量可变的元素，每个元素都由其自己的类管理。

【问题讨论】：

标签： javascript jquery animation queue

【解决方案1】：

你可以使用jQuery deferred objects:

var deferred = [
    new $.Deferred(),
    new $.Deferred(),
    new $.Deferred()
];

$(div1, div2, div3).each(function(i, elem) {
    $(elem).fadeOut(600, function() { deferred[i].resolve(); });
});

$.when(deferred[0], deferred[1], deferred[2]).done(function() {
    $(div4, div5, div6).each(function(i, elem) {
        $(elem).animation({ opacity : 1 }, 600);
    });
});

正如@Felix 在 cmets 中指出的那样，$.when 的更简洁语法如下所示：

$.when.apply(null, deferred).done(function() {
    $(div4, div5, div6).each(function(i, elem) {
        $(elem).animation({ opacity : 1 }, 600);
    });
});

【讨论】：

我认为你的意思是 two 和 three 在这两行与 one
你也可以写$.when.apply($, deferred).done(...。这可能是一个不错的插件...
@Felix 哈哈。我开始输入那个东西，然后认为“嗯......对于初学者来说可能太混乱了”，而是使用了一个参数列表。
如果有人感兴趣，@Felix 的.apply 语法将调用 jQuery when() 函数，并将数组中的所有延迟对象作为参数。
@stephen - 如果我正确阅读了您的代码，它是否类似于：pastebin.com/32i1nRDs 只是为了确保我理解这背后的想法（初学者和所有...:-)

【解决方案2】：

如果你使用的是 jQuery 1.6+，deferred.pipe() 可以简化代码：

$.Deferred(function (dfr) {
  dfr
  .pipe(function () { return $(div1).fadeOut(600); })
  .pipe(function () { return $(div2).fadeOut(600); })
  .pipe(function () { return $(div3).fadeOut(600); })
}).resolve();

参考：http://blog.darkthread.net/post-2011-08-03-deferred-pipe-animation.aspx

【讨论】：