Callback animation to begin only after ALL children have finished animating
<p>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".</p>

<pre><code>$('#DIV').children().fadeOut("slow", function() {
    $('#Message').fadeIn("slow");
});
</code></pre>

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

<p>Edit:  I should note that my #Message div is located <strong>inside</strong> of #DIV.</p>
