title: How to fadeOut one div and fadeIn another div with jquery timing?
body: <p>Thanks to <a href="https://stackoverflow.com/questions/3668412/jquery-fadein-fadeout-animation-issues"><strong>this answer</strong></a>, I can get a div to fade-out after 3 seconds. 
  But I can't get a second div to fade-in after 3 seconds - that div is already on-screen from zero. The code is:</p>
  
  <pre><code> $(document).ready( function() {
      $('#blue').delay(3000).fadenOut(100);
      $('#red').delay(3000).fadeIn(100);
    });
  </code></pre>
  
  <p>Demo: <a href="http://www.casedasole.it/stack/index.html" rel="nofollow noreferrer">http://www.casedasole.it/stack/</a></p>
  
  <p>The idea is to have div 1 (blue) dissolve and reveal div 2 (red).</p>
  
  <p>Please note: I've offset div 1 to show how div 2 is "always there". I need to hide div 2 because in testing, div 2 appears before div 1 covers it.</p>