Запуск анимации jQuery поочередно

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 отложенные объекты :

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