title: jQuery $.animate() multiple elements but only fire callback once
body: <p>If you select a class or collection of elements to animate with jQuery:</p>
  
  <pre><code>$('.myElems').animate({....});
  </code></pre>
  
  <p>And then also use the callback function, you end up with a lot of unneccessary <code>animate()</code> calls.</p>
  
  <pre><code>var i=1;
  $('.myElems').animate({width:'200px'}, 200, function(){
      //do something else
      $('#someOtherElem').animate({opacity:'1'}, 300, function(){        
          if (i&gt;1) console.log('the '+i+'-th waste of resources just finished wasting your resources');
          i++;
      });
  });
  </code></pre>
  
  <p>Arguably this is just bad code and / or design - but is there something I can do that both avoids having many <code>animate()</code> calls with only one of them using the callback, and having a load of unneccessary callbacks executing and screwing with my code / expected behaviour?</p>
  
  <p>Ideally I'd just be able to code a single 'disposable' callback that will only run once - otherwise perhaps there is an efficient way to test if something is already being animated by jQuery?</p>
  
  <p>Example: <a href="http://jsfiddle.net/uzSE6/">http://jsfiddle.net/uzSE6/</a> (warning - this will show a load of alert boxes).</p>