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()检查身份"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

<强> Working Fiddle

将delay()添加到fadeOut。

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

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

在标签之间切换时如何获得淡入淡出动画？

2 个答案: