FadeIn after FadeOut
<p>I can't figure it out why my div won't fadeIn after FadeOut finishes.</p>

<p>Heres my Html:</p>

<pre><code>&lt;div class="header-container"&gt;
    &lt;header class="wrapper clearfix"&gt;
        &lt;ul class="nav nav-tabs"&gt;
            &lt;li class="active"&gt;
                &lt;a href="#tab1"&gt;Section 1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#tab2"&gt;Section 2&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/header&gt;
&lt;/div&gt;

&lt;div class="main-container"&gt;
    &lt;div class="main wrapper clearfix"&gt;

        &lt;div class="tab-content"&gt;
                &lt;div class="tab-pane active" id="tab1"&gt;
                    &lt;p&gt;I'm in Section 1.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="tab-pane" id="tab2"&gt;
                    &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
                &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt; &lt;!-- #main --&gt;
&lt;/div&gt; &lt;!-- #main-container --&gt;
</code></pre>

<p>My JS</p>

<pre><code>jQuery(document).ready(function(){
    $('.nav-tabs a').click(function (e) {
      e.preventDefault();
      var href = $(this).attr('href'); // Select first tab
        $('.tab-pane').fadeOut(1000,function(){
            $(href).fadeIn(1000);
        });
    });

});
</code></pre>

<p>My Css</p>

<pre><code>.tab-pane {
    display: none;
}
</code></pre>

<p>I made a jsfiddle:</p>

<p><a href="http://jsfiddle.net/JohnnyDevv/hKq2K/1/" rel="nofollow">http://jsfiddle.net/JohnnyDevv/hKq2K/1/</a></p>

<p>I made it simple as possible...
Thanks in advance</p>
