javascript - 在选项卡之间切换时如何使用淡入淡出动画？

Question

我正在尝试在选项卡样式菜单的内容上添加一个微妙的淡入/淡出动画。我已经尝试了 jQuery .fadeIn() 和 .fadeOut() 我无法让它工作，除非它有一些关于内容保持显示的问题或者它似乎褪色的速度不同。

我用我的代码的简化版本创建了一个 fiddle :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;
}