我如何有一个淡出动画时切换选项卡之间

Question

我试图在标签样式菜单的内容上添加一个微妙的淡入/淡出动画。我已经尝试了jQuery .fadeIn()和.fadeOut()，我不能让它的工作没有它有某种问题的内容保持显示，或者看起来像淡出似乎在不同的步伐。

我创建了一个简化版本的代码:http://jsfiddle.net/SMpCS/3/

$('.room_tab').fadeOut(400, function () {
    $('.room_tab').delay().removeClass('show_tab');
    });
$('#room_tab_' + id).delay(400).fadeIn(400, function () {
    $('#room_tab_' + id).addClass('show_tab');
});

这部分工作，但当第一次更换制表符似乎太突然。这就像fadeOut一开始没有触发。

另一个问题是，如果用户单击已经选择的选项卡，它会再次运行淡出，这是我不希望发生的。

他们是一个更容易的方法来完成这一点吗?或者用给定的代码使其工作的方法?

Answer 1

首先，只淡出具有.show_tab的选项卡。另外，使用jQuery.prototype.hasClass()检查id为"room_tab_"+id的房间是否没有.show_tab。

function updatetab(id){
    var preRoom = $(".room_tab.show_tab");
    var curRoom = $("#room_tab_"+id);
    if (!curRoom.hasClass("show_tab")) {
        preRoom.fadeOut(400, function () {
            preRoom.delay().removeClass('show_tab');
        });
        curRoom.delay(400).fadeIn(400, function () {
            curRoom.addClass('show_tab');
        });
    }
    return false;
}

Answer 2

工作小提琴

添加delay()到fadeOut。

不要淡出所有标签，只淡出活动标签$('.room_tab.show_tab')

$('.room_tab.show_tab').delay(400).fadeOut(400, function () {
    $('.room_tab.show_tab').removeClass('show_tab');
});