回调动画仅在所有子项都完成动画后才开始 [英] Callback animation to begin only after ALL children have finished animating

问题描述

我有一个div，其中我想一次淡出所有子元素，但仅在所有子元素都完成淡出之后才淡入一个新元素.使用下面的当前代码，#Message div在第一个子元素之后开始逐渐淡入，并实际上放置在最后一个子元素之后.一旦最后一个孩子完全淡出，则#Message div然后跳"入位置.我想避免这种跳跃".

I have a div wherein I would like to fade all of the child elements out at once, but fade in a new element but only after all children have completed fading out. Using my current code below, the #Message div starts fading in after the first child element and is actually placed after the last child. Once the last child fades out completely, the #Message div then "jumps" up into position. I want to avoid this "jump".

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

如何确定直到#DIV的所有子元素上的fadeOut()完成后，fadeIn()动画才开始?

How can I make certain the fadeIn() animation doesn't begin until fadeOut() is complete on ALL child elements of #DIV?

我应该注意，我的#Message div位于#DIV的内部.

I should note that my #Message div is located inside of #DIV.

推荐答案

您将要使用延迟的对象专门针对这种情况.最简单的部分是动画默认情况下已经创建了延迟对象: http://jsfiddle.net/rkw79/zTxrt/

You'll want to use deferred objects specifically for scenarios like this. The easy part is that animations already create deferred objects by default: http://jsfiddle.net/rkw79/zTxrt/

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

这篇关于回调动画仅在所有子项都完成动画后才开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！