Как сделать ожидание в jQuery?

Question

[Alexander Lashchevsky]

Здравствуйте!

Если я хочу плавно установить ширину 1 блока в 500px, а после него - второго, то я делаю следующим образом:

$('.block-1').animate({width: '500px'}, 500);
$('.block-2').delay(500).animate({width: '500px'}, 200);

Но когда этих блоков много, и у них много что меняется, не только ширина, играться с delay становится сложно. Особенно сложно становится, когда я добавляю ещё какую-нибудь анимацию в середине: приходится во всех последующих снова высчитывать каждый delay...
Можно ли реализовать как-то так?

$('.block-1').animate({width: '500px'}, 500);
wait 500 ms
$('.block-2').animate({width: '500px'}, 200);

Вместо wait 500 ms.
Есть что-нибудь, что позволит таким образов расставлять ожидание следующего действия?

С уважением,
Александр.

Answer 1

[Сергей Протько]

1) колбэки:

$node.animate({}. function () {
    $node2.animate();
});

но не очень удобно. Промисы получше, можно так же оформлять как цепочку промисов, дожидаться пока отработает анимация нескольких элементов и т.д.

// http://stackoverflow.com/questions/10370298/how-do-i-animate-in-jquery-without-stacking-callbacks
function chain() {
var promise = $.Deferred().resolve().promise();
    jQuery.each( arguments, function() {
        promise = promise.pipe( this );
    });
    return promise;
}

var animations = $.chain(function() {
    return $('div1').fadeOut('slow');
}, function() {
    return $('div2').fadeOut('slow');
}, function() {
    return $('div3').animate({ top: 500 }, 1000 );
});

$.when( animations ).done(function() {
    // ALL ANIMATIONS HAVE BEEN DONE IN SEQUENCE
});