title: jQuery: Run one function after another completes
body: <pre><code>$('#tab-featured').tap(function(){
      $('.home-section').fadeOut(function(){
          $('#home-featured').fadeIn();
      });
  });
  </code></pre>
  
  <p>I'm trying to use the code above to call the <code>fadeIn()</code> after the <code>fadeOut()</code> completes. The <code>fadeOut()</code> works fine. I've run functions after others complete before, but this time it's not working and for the life of me I can't figure out why.</p>
  
  <p>Running jQuery latest from their CDN.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div id="home-mid" class="column-mid"&gt;
      &lt;div id="home-featured" class="home-main home-section"&gt;
          &lt;!--- Some Code ---&gt;
      &lt;/div&gt;
  
      &lt;div id="home-2" class="home-main home-section"&gt;
          &lt;!--- Some Code ---&gt;
      &lt;/div&gt;
  
      &lt;div id="home-3" class="home-main home-section"&gt;
          &lt;!--- Some Code ---&gt;
      &lt;/div&gt;
  
      &lt;div id="home-4" class="home-main home-section"&gt;
          &lt;!--- Some Code ---&gt;
      &lt;/div&gt;
  
      &lt;div id="home-5" class="home-main home-section"&gt;
          &lt;!--- Some Code ---&gt;
      &lt;/div&gt;
  
      &lt;div id="home-tabs"&gt;
          &lt;div id="tab-featured" class="home-tab"&gt;&lt;/div&gt;
          &lt;div id="tab-2" class="home-tab"&gt;&lt;/div&gt;
          &lt;div id="tab-3" class="home-tab"&gt;&lt;/div&gt;
          &lt;div id="tab-4" class="home-tab"&gt;&lt;/div&gt;
          &lt;div id="tab-5" class="home-tab"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>Tried it with <code>hide</code> instead of <code>fadeOut</code> and it worked fine. Not sure why <code>fadeOut</code> isn't working.</p>