Question

我有四个标签，默认情况下其中一个标签处于活动状态。单击非活动选项卡时，它会展开，活动选项卡会收缩。

我遇到的问题是在动画期间点击了非活动标签页。

$(document).ready(function(){
    $('.tab').bind('click',function(){
        if(!$(this).hasClass('activetab')){
            $('.activetab').removeClass('activetab',500);
            $(this).addClass('activetab',500);
        }
    });
});

我知道动画堆叠问题一直在被问到，但我找不到这个特定例子的解决方案。

我不希望动画停止，反转或排队。我只是希望在动画仍在进行时完全忽略任何其他选项卡上的任何点击。

非常感谢！

Answer 1

添加一个全局变量以指示您现在是否处于动画状态。在true处理程序的开头将其设置为click，在其中一个动画方法回调中返回false。并检查它以决定是否应该进入click处理程序。我编辑了你的小例子http://jsfiddle.net/vSWdS/

 var currently = false;
$('.tab').bind('click',function(){
    if(!$(this).hasClass('activetab') && !currently){
        currently = true;
        $('.activetab').removeClass('activetab',500);
        $(this).addClass('activetab',500, "swing", function(){
            currently = false;
        });
    }
});

jQuery禁用事件侦听器直到事件结束

1 个答案: