title: Nested callbacks in jQuery
body: <p>I'm trying to create an animated map.</p>
  
  <p>I have points that drop on to my map that all run in a callback as so...</p>
  
  <pre><code> // Animate the drops
  $marker.animate({
      top : '100px'
  }, 500, 'easeOutBounce', function(){
      $america.animate({
          top : '150px'
      }, 500, 'easeOutBounce', function(){
          $england.animate({
              top : '80px'
          }, 500, 'easeOutBounce', function(){
              $australia.animate({
                  top : '300px'
              }, 500, 'easeOutBounce');
          });
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Liamatvenn/T3CTH/1/" rel="nofollow">http://jsfiddle.net/Liamatvenn/T3CTH/1/</a></p>
  
  <p>Is this a bad way to go about this?  Will this take up more resources on my visitor's computers? </p>