我有一个div,其中我想立即淡化所有的子元素,但淡入一个新的元素,但只有在所有的孩子完成淡出后.使用下面的当前代码,#Message div在第一个子元素之后开始淡入,并且实际上放在最后一个子元素之后.一旦最后一个孩子完全淡出,#Message div就会“跳”到位.我想避免这种“跳跃”.
$('#DIV').children().fadeOut("slow",function() {
$('#Message').fadeIn("slow");
});
如何在#DIV的所有子元素上完成fadeOut()之后才能确定fadeIn()动画是否开始?
编辑:我应该注意我的#Message div位于#DIV内部.
最佳答案
你会想要特别使用deferred objects这样的场景.简单的部分是动画默认情况下已经创建了延迟对象:http://jsfiddle.net/rkw79/zTxrt/
$.when(
$('#DIV').children().each(function(i,o) {
$(o).fadeOut((i+1)*1000);
})
)
.done(function() {
$('#Message').fadeIn("slow");
});