在动画结束之前，如何防止点击在JQuery中执行操作？

Question

关于我正在尝试使用JQuery创建的函数，我遇到了这个小问题。

我有一个包含9个选项卡的菜单，每当鼠标越过其中一个选项卡时，菜单将向下滑动（使用JQuery中的slideUp（）和slideDown（）），如果用户单击其中一个选项卡当鼠标结束时，它的菜单将保持静止并向上滑动。

我的问题是，每当我在菜单仍然向下滑动时单击选项卡时，菜单将停止延伸到其原始高度。我想要的是知道如何激活选项卡，如果菜单仍在向下滑动时单击，则不执行任何操作。

提前致谢

Answer 1

当标签系统的任何部分为动画时，您可以创建一个布尔变量animating，true。然后在点击时检查其值。

设置值

如果可以同时为多个选项卡设置动画，则可以为每个选项卡创建一个单独的animating布尔值，在动画开始时将它们设置为true并在回调中设置为false。这里我使用了一个关联数组：

animating['Tab1'] = true;
$tab1.animate({...}, 1000, function() {
    animating['Tab1'] = false;
});

检查值

然后，在任何时候，您都可以通过评估所有单独的布尔值来评估您的标签系统的任何部分是否为动画：

function isAnimating() {
    for (var tab in animating) {
        if (animating[tab])
            return true;
    }
    return false;
}

禁用点击次数

然后将click事件绑定到选项卡系统，如果选项卡系统是动画，则阻止默认操作：

$tabs.click(function(e) {
    if (isAnimating) {
        e.preventDefault();
    }
});

Answer 2

jQuery选择器:animated将只保留当前正在设置动画的元素。使用此功能，您可以检查可以设置动画的选项卡系统部分是否在单击事件时执行此操作：

$tabs.click(function(e) {
    if ($tabs.is(':animated'))
        e.preventDefault();
});