Javascript 在选项卡之间切换时，如何生成淡入淡出动画？

我试图在选项卡样式菜单的内容上添加一个微妙的淡入/淡出动画。我已经尝试过jQuery

.fadeIn（）

和

.fadeOut（）

我无法让它工作，除非它出现某种问题，内容一直显示在屏幕上，或者看起来淡出的速度不同

我用简化版的代码创建了一个小提琴：

这在一定程度上起了作用，但在第一次更改选项卡时，它似乎太突然了。这就好像淡出最初并没有触发

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

这是一种更容易实现的方法吗？或者使用给定的代码实现此功能的方法？

将

delay（）

添加到

fadeOut

不要淡出所有选项卡，只需淡出活动选项卡

$（'.room\u tab.show\u tab'）

---

首先，仅淡出具有

。show_tab

的选项卡。另外，使用

jQuery.prototype.hasClass（）

检查id为

“room\u tab\u”+id

的房间是否没有

。显示\u 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;
}

---

我没有注意到

.fadeOut（）

有任何延迟。延迟现在已经处理好了，谢谢！现在，如果用户单击已选择的选项卡，是否可以禁用动画？这也解决了该问题。再次感谢，但此解决方案在当前内容褪色后会产生轻微的跳跃效果。内容会在下方褪色，然后跳到顶部@Noble Mushtak有一个解决所有问题的解决方案，而且没有跳跃，所以我将接受这个答案。谢谢你的帮助！这很好地解决了我遇到的所有问题。非常感谢。如果（！id）{return；}，我应该在函数

中包含这个catch吗？或者它是不必要的吗？是的，添加它将是一个好主意。您可能需要一个数组
acceptableIds[]
，然后
返回false可接受id，则立即编码>索引（id）=-1
。
$('.room_tab.show_tab').delay(400).fadeOut(400, function () {
    $('.room_tab.show_tab').removeClass('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;
}