什么是写了一系列的承诺成一系列的动画，可以在年底收集的语法？ 我读过了jQuery手册，看几个相关问题的SO，但我似乎无法得到中，.done（）消息完成所有动画之后触发。
到目前为止的代码：
$.when(
$graphName.fadeIn(500).promise().then(function(){
$graphaxes.each(function(index) {
$(this).delay(500*index).fadeIn(700).promise().then(function(){
$(".circle.bk").each(function(index) {
$(this).delay(500*index).fadeIn(700).promise().then( function(){
$graphlabel.each(function(index) {
$(this).delay(600).fadeIn(800).promise().then( function(){
fadeLabels();
$(".circle").each(function(index) {
$(this).delay(500*index).fadeIn(700).promise();
});
});
});
});
});
});
});
})
).done(function(){
console.log("All animations complete");
});
承诺链 ，你不必和坦率地不应该巢他们。 这是他们力量的最大来源。 您可以从承诺回报，然后链到他们，那.then将执行，一旦你提供满足内心的承诺。
$graphName.fadeIn(500).promise().then(function(){
// map each item to a promise, wait for all, if you don't want to wait remove
// the $.when.apply around it and return a $.when on the single value
return $.when.apply(null, $graphaxes.map(function(i, gi) {
return $(gi).delay(500 * i).fadeIn(700).promise();
}).get()); // to get an array
}).then(function(res){
// now animate all the circles, again if you don't want to wait remove
// the $.when.apply so it won't wait
return $.when.apply(null, $(".circle.bk").map(function(i, el) {
return $(this).delay(500 * i).fadeIn(700).promise()
}));
}).then(function(res){
return $.when.apply(null, $graphlabel.map(function(i, el) {
return $(el).delay(600).fadeIn(800).promise()
}).get());
}).then(function(res){
fadeLabels(); // this calls fadeLabels() once, if you want to call it for
// each promise you can of course do it
return $.when.apply(null, $(".circle").map(function(index) {
return $(this).delay(500*index).fadeIn(700).promise();
}).get());
}).then(function(res){
console.log("All animations complete");
});
我认为你可以做到这一点简单的比你接受的答案，因为jQuery将返回一个代表整个集合，所以你不必使用一个承诺$.when()来管理自己。 这是对的非常好的特性之一.promise()方法调用的一个集合，是所有动画。 所以，我认为你可以这样做：
$graphName.fadeIn(500).promise().then(function(){
return graphaxes.each(function(i) {
$(this).delay(500 * i).fadeIn(700);
}).promise();
}).then(function() {
return $(".circle.bk").each(function(index) {
$(this).delay(500*index).fadeIn(700);
}).promise();
}).then(function() {
return $graphlabel.delay(600).fadeIn(800).promise();
}).then(function() {
fadeLabels();
return $(".circle").each(function(index) {
$(this).delay(500*index).fadeIn(700);
}).promise();
}).then(function() {
console.log("all animations complete");
});
而且，如果你为你的进步延迟一个jQuery插件方法，您可以简化代码更是这样：
jQuery.fn.fadeInProgressive = function(delayFactor, fadeTime) {
return this.each(function(index) {
$(this).delay(delayFactor * index).fadeIn(fadeTime);
});
};
$graphName.fadeIn(500).promise().then(function(){
return graphaxes.fadeInProgressive(500, 700).promise();
}).then(function() {
return $(".circle.bk").fadeInProgressive(500, 700).promise();
}).then(function() {
return $graphlabel.delay(600).fadeIn(800).promise();
}).then(function() {
fadeLabels();
return $(".circle").fadeInProgressive(500, 700).promise();
}).then(function() {
console.log("all animations complete");
});
