Question

我有一个div，其中我想立即淡化所有的子元素，但淡入一个新的元素，但只有在所有的孩子完成淡出后。使用下面的当前代码，#Message div在第一个子元素之后开始淡入，并且实际上放在最后一个子元素之后。一旦最后一个孩子完全淡出，那么#Message div就会跳过＆＃34;跳跃＆＃34;上升到位。我想避免这种情况＆＃34;跳跃＆＃34;。

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

我怎样才能确定fadeIn（）动画在#DIV的所有子元素上完成fadeOut（）之后才开始？

编辑：我应该注意我的#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");
});

Answer 2

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

基本上计算仍然有多少动画，当剩下只剩下一个时，运行回调。

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

回调动画仅在所有孩子完成动画后才开始

2 个答案: