title: jQuery: How to use deferreds with animation stack
body: <p>I'm having trouble determining how to use Deferreds to run a callback after an animation sequence completes. If I was animating only one thing, I know I could just use <code>.promise()</code> on the end of the animate/fade/slide, but with trying to animate multiple things, I'm not sure how to work it in.</p>
  
  <p>My code so far is below:</p>
  
  <pre><code>var delayTime = 0;
  $stack = $('li'); // returns five list items.
  $stack.each(function(index, element) {
      $(element).delay(delayTime).animate({ opacity: 0.3 }, 500, function() {
          $(element).animate({ opacity: 1 }, 500);
      });
      delayTime += 1250;
  });
  </code></pre>
  
  <p>I want to run a callback at the end, after all elements fade in and out, in succession.</p>