1

2つのタブを新規とトレンドにするサンプルコードを書きました

$(function() {
$("#t1").click(function() {
    $("#t2").removeClass("current");
    $(this).addClass("current");
    $("#newTrend").hide();
    $("#newContent").show();
});
$("#t2").click(function() {
    $("#t1").removeClass("current");
    $(this).addClass("current");
    $("#newContent").hide();
    $("#newTrend").show();
});
});

コードはうまく機能していますが、タブが変更されたときにフェードのような効果を追加したい

ここでjsfiddle http://jsfiddle.net/Ta3Q4/の私のコード

そして、.hide() と .show() の代わりに .fadeOut() と .fadeIn() を使用すると

新しいタブとトレンド タブの両方が同時に表示されます。こちらを参照してくださいhttp://jsfiddle.net/Ta3Q4/1/

では、2 つのタブを同時に表示せずにフェードインとフェードアウトを行うにはどうすればよいでしょうか。

4

3 に答える 3

2

fadeOutコールバックを使用します。

$(function() {
    $("#t1").click(function() {

        $("#t2").removeClass("current");
        $(this).addClass("current");
        $("#newTrend").fadeOut(400, function() {            
            $("#newContent").fadeIn(400);
        });

    });
    $("#t2").click(function() {

        $("#t1").removeClass("current");
        $(this).addClass("current");
        $("#newContent").fadeOut(400, function() {           
            $("#newTrend").fadeIn(400);
        });     
    });
});

このようにして、古い要素が完全にフェードアウトするまで、新しい要素をフェードインしません。

フィドルを更新しました。

于 2013-07-16T16:48:46.343 に答える