如何防止jQuery“fadeToggle”一遍又一遍地循环？答案

【问题标题】：How to prevent jQuery "fadeToggle" from looping over and over again?如何防止jQuery“fadeToggle”一遍又一遍地循环？
【发布时间】：2017-02-02 00:12:57
【问题描述】：

我有一个关于 jQuery 的相对简单的问题（请原谅我是菜鸟）。我在 div 上使用了“fadeToggle”（单击）功能来显示另一个元素，但是如果用户单击 div 说 100 次，我如何阻止动画在每次单击时一遍又一遍地播放？

【问题讨论】：

也许你可以使用 .stop() 如果你有任何特殊情况，请使用 jsfiddle.net
向我们展示您的代码和相关的 HTML。如果我们看到您的代码，我们只能提供具体的答案。

标签： jquery

【解决方案1】：

您也可以在调用之前验证队列是否为空，

$("button").click(function() {
    if (!$animatedElement.queue().length) {
      $animatedElement.fadeToggle("slow", "linear");
    }
});

http://jsfiddle.net/EU5WK/

【讨论】：

【解决方案2】：

我见过这个问题的变体，其中使用了is running? 类型的变量：

http://jsfiddle.net/VRDP9/

running = false;

$("button:first").click(function() {
    if (!running) {
      running = true;
      $("p:first").fadeToggle("slow", "linear", function() { running = false; });
    }
});

【讨论】：

【解决方案3】：

您需要设置某种在第一次迭代中激活的指标，然后在该函数开始时检查它。这可以是一个变量，也可以在目标元素上添加并检查类名。

【讨论】：

【解决方案4】：

最简单的方法是使用 .(stop) 示例：

<div id="hover_on_me_box>Hover on me!</div>

<div style="display:none" id="hidden_box">Content....</div>

$("#hover_on_me_box").hover(function() {
    $("#hidden_box").stop().fadeToggle("500");
});

【讨论】：