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

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

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

Updated fiddle .