title: How to chain jQuery animations with a pause?
body: <p>Hi I'm trying to do a simple chain animation in jQuery, with a pause (setTimeout) between each frame.</p>
  
  <p>Say each div animates in with a duration of 3500. I would like to control the duration between each opacity fade in animation. Say between the first div and 2nd div the duration is 5 secs, and maybe 10 secs between the 2nd and 3rd frame.</p>
  
  <p>How would you go about this?</p>
  
  <p><a href="http://codepen.io/leongaban/pen/Feroh" rel="nofollow">http://codepen.io/leongaban/pen/Feroh</a></p>
  
  <p>Current code</p>
  
  <pre><code>$('#blue').animate({
              opacity: '1'
        }, 3500, function(){
  
          // Need 5 sec pause here            
  
          $('#blue').fadeOut('fast');
          $('#orange').animate({
              opacity: '1'
              }, 3500, function(){
  
                // Need a 10 sec pause here
  
                $('#orange').fadeOut('fast');
                $('#green').animate({
                opacity: '1' }, 3500);
  
              });
        });
  </code></pre>