title: How to change text after delay - jQuery
body: <p>I have two divs with individual id's and a class to style the same.</p>
  
  <p>foo_1 has a z-index so it's above foo_2.</p>
  
  <pre><code>&lt;div id="foo_1" class="foo"&gt;&lt;p&gt;I'm awesome.&lt;/p&gt;&lt;/div&gt;
  &lt;div id="foo_2" class="foo"&gt;&lt;p&gt;No, I am.&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What I'd like to do is to have foo_1 fade out with foo_2 behind it.</p>
  
  <p>I did try this;</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div id="foo_1" class="foo"&gt;&lt;p&gt;I'm awesome&lt;/p&gt;&lt;/div&gt;
  &lt;div id="foo_2" class="foo" style="display: none;"&gt;&lt;p&gt;No, I am.&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <h3>jQuery</h3>
  
  <pre><code>$(document).ready(function()
  {
      setTimeout(function()
      {
          $("#foo_1").fadeOut("slow", function ()
          {
              $("#foo_1").remove();                
              $("#foo_1").html($("#foo_2").text());
              $("#foo_1").show();
          });
       }, 5000);
   });
  </code></pre>
  
  <p>​
  Thanks!</p>