title: How to wait for one jquery animation to finish before the next one begins?
body: <p>I have the following jQuery:</p>
  
  <pre><code>$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
  $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
  </code></pre>
  
  <p>My issue is that both happen at the same time.  I would like the div2 animation to start when the first one finishes.  I've tried the method below, but it does the same thing:</p>
  
  <pre><code>$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
  ....
  function ShowDiv(){
     $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
  }
  </code></pre>
  
  <p>How can I make it wait for the first one to finish?</p>