jquery – 仅在所有子项完成动画后才开始的回调动画

前端之家收集整理的这篇文章主要介绍了jquery – 仅在所有子项完成动画后才开始的回调动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个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");
});

猜你在找的jQuery相关文章