如何在没有堆叠回调的情况下在jQuery中制作动画？

Question

假设我有三个div,并且我希望每个div都完成前一个动画.目前,我写这个:

$('div1').fadeOut('slow', function() {
    $('div2').fadeOut('slow', function() {
        $('div3').fadeOut('slow');
    });
});

这是丑陋的,但可管理.

现在想象一下,我有10种不同的动画需要在不同的元素上一个接一个地发生.突然,代码变得如此笨重,以至于管理起来非常困难......

这是我想要做的伪代码:

$('div1').fadeOut('slow' { delay_next_function_until_done: true } );
$('div2').fadeOut('slow' { delay_next_function_until_done: true } );
$('div3').animate({ top: 500 }, 1000 );

我该如何实现这一目标？

Answer 1

如果您使用的是最新版本的jQuery,请使用动画承诺:

$('div1').fadeOut('slow').promise().pipe(function() {
    return $('div2').fadeOut('slow');
}).pipe(function() {
    return $('div3').animate({ top: 500 }, 1000 );
});

你可以把它变成通用的:

$.chain = function() {
    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
});

仍然有很多功能闭包,但这是Javascript的本质.但是,使用Deferreds/Promises更自然,更灵活,因为您可以避免回调"开始".