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

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

Updated fiddle

Answer 3

将fadeIn()作为回调添加到fadeOut。

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

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

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

如何在不显示的情况下将淡入淡出效果添加到.hide（）和.show（）

3 个答案: