jquery - 仅在所有子级完成动画后才开始回调动画

Question

我有一个 div，其中我想立即淡出所有子元素，但只有在所有子元素完成淡出后才淡入新元素。使用下面我当前的代码，#Message div 在第一个子元素之后开始淡入，并且实际上放置在最后一个子元素之后。一旦最后一个子元素完全淡出，#Message div 就会“跳”到适当的位置。我想避免这种“跳跃”。

$('#DIV').children().fadeOut("slow", function() {
    $('#Message').fadeIn("slow");
});

如何确保在 #DIV 的所有子元素上完成 fadeOut() 之前，fadeIn() 动画不会开始？

编辑:我应该注意我的#Message div 位于#DIV 的内部。

Answer 1

您需要使用deferred objects专门针对这样的场景。最简单的部分是动画已经默认创建延迟对象:http://jsfiddle.net/rkw79/zTxrt/

$.when(
    $('#DIV').children().each(function(i,o) {
        $(o).fadeOut((i+1)*1000);
    })
)
.done(function() {
    $('#Message').fadeIn("slow");
});