jQuery/Javascript: Waiting for an animation to finish
<p>Let me preface this by saying I am new to Javascript, but not to programming. I call <code>fadeOut</code> on a jQuery Object like such:</p>

<pre><code>$(x).fadeOut('fast');
</code></pre>

<p>I have other things that will be fading out and in, but I need them to wait for each other, and I do not necessarily know how many are going to be doing this. <code>x</code> is a string from an array that contains the items that are are fading in or out. In my first attempt I used the callback function in <code>fadeOut</code> like this:</p>

<pre><code>$(x).fadeOut('fast', function(){ foo(modifiedArray); })
</code></pre>

<p>Where <code>foo</code> is the method I want, and modifiedArray is the array minus <code>x</code>. This still didn't make it wait though, so next I tried:</p>

<pre><code>$(x).fadeOut('fast');
while( $(x).css('display') != 'none' ){}
foo(modifiedArray);
</code></pre>

<p>But the loop never ends. How can I make the animation wait before I call <code>foo(modifiedArray)</code> again?</p>

<p>EDIT: Here is the full code</p>

<pre><code>function animateElements(elements){
if (elements.length == 1){
    var x = elements[0];
    $(x).fadeIn('slow');
}
else{
    var x = elements.pop();
    $(x).fadeOut('fast');
    while(  $(x).css('display') != 'none' ){}
    animateElements(elements);
}
}
</code></pre>
