我有一组淡出动画,之后我想运行一组动画调用.
如何确保一个接一个地运行？
如果我这样做：
$(div1).fadeOut(600);
$(div2).fadeOut(600);
$(div3).fadeOut(600);
$(div4).animation({opacity:1},600);
$(div5).animation({opacity:1},600);
$(div6).animation({opacity:1},600);
动画并行运行.
上面的代码只是问题的简化/抽象.我不能将所有调用分组到一个函数中,并且在现实生活中有可变数量的元素,每个元素由它自己的类管理.
解决方法
你可以使用jQuery
deferred objects：
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,600);
});
});
