How do I delay a jQuery animation until after others finish?
<p>I have a function that does some fairly extensive DOM manipulation, and I want to show a "Loading..." spinner while the function runs:</p>

<pre><code>function showFoos() {
  $('#spinner').show();
  bigHairyDOMManipulation();
  $('#spinner').hide();
}

function bigHairyDOMManipulation() {
  for (var i=0; i &lt; arrayOfFoos.length; i++){
    buildFooBox(arrayOfFoos[i], i);
  }
}

function buildFooBox(foo, index) {
  $('#foos').append(
              $('&lt;li /&gt;').append(...)
                         .append(...)
                         ...
             );
}
</code></pre>

<p>Unfortunately, all of the <code>append()</code> calls return quickly, so even though the view isn't ready, the function is done and the spinner hides.</p>

<p>I can't think of a good way of chaining all of those appends together into one chain, so I can't just tack the <code>show()</code> on the front and the <code>hide()</code> on the end.</p>

<p>Is there another way to force the <code>hide()</code> call to wait for all the other manipulation to occur?</p>
