The callback animation begins only after all the children have finished the animation.

Question

I have a div in which I would like to immediately remove all children, but disappear in the new element, but only after all the children have finished disappearing. Using my current code below, the #Message div starts to fade after the first child and is actually placed after the last child. As soon as the last child disappears completely, the #Message div then “jumps” to position. I want to avoid this "jump".

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

How can I make sure that the fadeIn () animation does not start until fadeOut () is completed in all #DIV child elements?

Edit: I have to note that my #Message div is inside the #DIV.

Answer 1

You want to use deferred objects specifically for such scenarios. The easy part is that the animation already creates 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");
});

Answer 2

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

Basically count how many more animations, and when there is only one left, run the callback.

It also allows you to call back only once, and not once for each item.