只有在所有孩子完成动画后才开始回调动画答案

【问题标题】：Callback animation to begin only after ALL children have finished animating只有在所有孩子完成动画后才开始回调动画
【发布时间】：2011-09-16 20:24:41
【问题描述】：

我有一个 div，我想一次将所有子元素淡出，但要淡入一个新元素，但前提是所有子元素都完成淡出。使用下面我当前的代码，#Message div 在第一个子元素之后开始淡入，实际上放置在最后一个子元素之后。一旦最后一个孩子完全消失，#Message div 就会“跳”到适当的位置。我想避免这种“跳跃”。

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

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

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

【问题讨论】：

根据文档，你有什么权利。 api.jquery.com/fadeOut
似乎工作正常：jsfiddle.net/j8Pst
你想要的效果可以用你的代码正常工作，但是如果你的fadeOut动画时间不同，你需要使用延迟对象（详见帖子）。请注意，我帖子中的代码也可以用于任何等待机制（例如 ajax 调用）
我想你想要延期。在这里阅读：erichynds.com/jquery/using-deferreds-in-jquery

标签： jquery

【解决方案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");
});

【讨论】：

实际上，动画不会自动创建promise。承诺是通过调用.promise 函数创建的，而$.when 恰好为每个传递的参数执行此操作。你可以写$(...).each(...).promise().done(...) 而不是$.when。

【解决方案2】：

$('#DIV').children().fadeOut("slow", function() {
    if($('#DIV').children().filter(':animated').length == 1) $('#Message').fadeIn("slow");
});

基本统计还有多少还在做动画，当只剩下一个时，运行回调。

这也使你的回调只运行一次，而不是每个元素一次。

【讨论】：

对不起，我有一个错字。（我错过了.length）
我仍然会“跳跃”起来，好像#Message 在所有内容都完成淡出之前开始淡入。我应该注意到#Message div 位于#DIV 内部；我已经更新了原始问题以说明这一点。