How to deal with the callback being called multiple times when animating more than one thing in jQuery
<p>Consider this code...</p>

<pre><code>$(function() {

  for (var i = 0; i &lt; 10; i++) {
    $('body').append('&lt;div style="width: 30px; height: 30px; background: red; margin: 10px;" /&gt;')

    }

      $('div').slideUp(1000, function() {

        $('body').append('done sliding');

      });

});
</code></pre>

<p>(see it on <a href="http://jsbin.com/etoqu/edit" rel="nofollow">JSbin</a>)</p>

<p>It creates 10 <code>div</code>s and then slides them up. The callback is called 10 times, when I would prefer it to be called once (after all have finished sliding).</p>

<p>I know <a href="http://jsbin.com/etoqu/2/edit" rel="nofollow">I could do a Boolean</a> or something, like <code>hasCalledCallback</code>, but is there any other more elegant way to make multiple elements animating call a completion callback only once?</p>
