11

FadeOutが終了した後にdivがフェードインしない理由がわかりません。

これが私の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/

なるべくシンプルにしました…よろしくお願いします

4

3 に答える 3

31

これにより、期待する望ましい結果が出力されます。

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

.promise()最初に完了することを保証し、fadeOut()それが完了すると.done()実行されます。

デモフィドル

于 2013-03-27T13:37:28.847 に答える
1

共通のクラス名.tab-paneを使用して、問題のように思われるフェードアウトをアニメーション化しています。使用している「.active」クラスを利用してみてください。

このjsを試してください

$('.nav-tabs a').click(function (e) {
     e.preventDefault();
     var href = $(this).attr('href'); // Select first tab
     // select the active tab then remove the active class name then do the fade out
     $('.tab-pane.active').removeClass("active").fadeOut('slow',function(){
          $(href).addClass("active").fadeIn(1000);
     });
});

JSフィドル： http： //jsfiddle.net/hKq2K/2/

于 2013-03-27T13:30:15.813 に答える
1

ユーザーのフックを利用する：Jai

タブのコンテンツがすでに開いている場合に機能させたくない場合は、次を使用します。

。いいえ（）

$('.nav-tabs a').click(function (e) {
      e.preventDefault();
      var href = $(this).attr('href'); // Select first tab
        $('.tab-pane').not(href).fadeOut(1000).promise().done(function(){
            $(href).fadeIn(1000);
        });
    });

デモjsfiddle

申し訳ありませんが、私の英語は別の国籍の出身です。=]

于 2017-06-15T22:28:15.760 に答える