javascript - 在滑动时阻止 jquery 函数

Question

我有一个包含 6 个选项的菜单，每个选项都应该在其他地方显示一个带有一些文本的 div。我在此菜单中添加了 jQuery 功能，当我单击任何选项时，正确的 div 会向下滑动，而任何其他 div 会再次向上滑动。

问题是，如果有人在不同的项目上点击得非常快，就会同时打开多个 div。我该如何控制它，比如在 div 加载/卸载时禁用该功能？

它是简单的 HTML，没有 PHP 页面。

Answer 1

假设您正在使用animate()或正在使用queue()您可以stop()用来结束动画。

在没有看到您的代码或 HTML 的情况下，我可以提供尽可能多的帮助。

一个潜在的例子：

<ul class="my-collapsible-content">
  <li>Some text</li>
  <li>Some other text</li>
  <li>Some more text</li>
</ul>


$('.my-collapsible-content').on('click', '>li', function(){
    $(this).siblings().stop(true, true); //stops animation and jumps to 'final' state immediately
    $(this).animate(.....);
})

Answer 2

您可以查看http://api.jquery.com/animated-selector/以查看是否正在制作动画，如果是，则返回；

例子：

$("#clickme").click(function(){
    if ($(".slider:animated")) return;
    //DO YOUR ANIMATION CODE
});

您也可以尝试添加一个全局变量，例如“var 动画”。启动动画时将其设置为 true。然后在动画完成时将其设置回 false 。

然后在您的点击功能中只允许点击 if(animating == false)

var animating;

$('#clickme').click(function() {
    if(!animating){
        animating = true;
        $('#book').animate({
            opacity: 0.25,
            left: '+=50',
            height: 'toggle'
        }, 5000, function() {
            // Animation complete.
            animating = false;
        });
    }
});