jquery - jQuery 禁用事件侦听器，直到事件完成

Question

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

我遇到的问题是在动画期间单击非活动选项卡时。

http://jsfiddle.net/wFHBR/

$(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;
        });
    }
});