jquery - 淡入后淡出

Question

我不明白为什么我的 div 在 FadeOut 完成后不会淡入。

这是我的 Html:

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

<div class="main-container">
    <div class="main wrapper clearfix">

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

    </div> <!-- #main -->
</div> <!-- #main-container -->

我的JS

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);
        });
    });

});

我的CSS

.tab-pane {
    display: none;
}

我做了一个jsfiddle:

http://jsfiddle.net/JohnnyDevv/hKq2K/1/

我把事情说得尽可能简单...提前致谢

Answer 1

这将输出您期望的结果:

 $('.tab-pane').fadeOut(1000).promise().done(function(){
     $(href).fadeIn(1000);
 });

.promise() 确保首先完成 fadeOut()，然后在完成时执行 .done()。

DEMO FIDDLE