Question

我有一组淡出动画，之后我想要运行一组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);

动画并行运行。

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

Answer 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在评论中指出的那样，$.when的更清晰的语法如下所示：

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

Answer 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

连续运行jQuery动画

2 个答案: