jquery - 如何在不显示的情况下向 .hide() 和 .show() 添加淡入淡出效果

Question

我编写了示例代码来制作 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/中的代码

当我使用 .fadeOut() 和 .fadeIn() 而不是 .hide() 和 .show()

新选项卡和趋势选项卡同时显示，请参见此处http://jsfiddle.net/Ta3Q4/1/我的意思

那么如何在没有同时显示 2 个选项卡的情况下进行淡入淡出呢？

Answer 1

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

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

这样，在旧元素完全淡出之前，您不会淡入新元素。

更新了小提琴。

Answer 3

添加fadeIn()作为回调到fadeOut.

$("#newContent").fadeOut(function() {
    $("#newTrend").fadeIn();   
});

$("#newTrend").fadeOut(function() {
    $("#newContent").fadeIn();
});

演示：http: //jsfiddle.net/Ta3Q4/6/