jQuery: Run one function after another completes
<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>
