假设我有三个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 );
我该如何实现？
解决方法
如果您使用最新版本的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更加自然，更灵活，因为您避免回调“初始”。
