jQuery - 禁用单击直到所有链接的动画完成 [英] jQuery - Disable Click until all chained animations are complete

问题描述

以下解决方案旨在向下滑动 groupDiv ，显示 div1 以及 div2 的足够空间。这些都是通过在 #Link上链接动画来实现的。点击（） 元素。

The solution below is intended to slide down the groupDiv displaying div1 and enough space for div2 to slide in. It's all achieved by chaining the animations on the #Link.Click() element.

似乎 错误 ，快速点击 链接时 。有办法防止这种情况吗？通过禁用Click功能，直到 链式 动画完成？我目前有检查，但他们似乎没有做这项工作：（

It seems to bug out, though, when the link is clicked rapidly. Is there a way to prevent this? By perhaps disabling the Click function until the chained animations are complete? I currently have checks in place, but they don't seem to be doing the job :(

这是我正在使用的代码：

Here's the code i'm using:

//Slide up or down and fade in or out
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
    if (this.is(":hidden")) {
        visibilityCheck("show", counter--);
        return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
    } else {
        visibilityCheck("hide", counter++);
        return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
    }
};

//Slide off page, or into overflow so it appears hidden.
jQuery.fn.slideLeftToggle = function(speed, easing, callback) {
    if (this.css('marginLeft') == "-595px") {
        return this.animate({marginLeft: "0"}, speed, easing, callback);
    } else {
        return this.animate({marginLeft: "-595px"}, speed, easing, callback);
    }
};

---

在dom准备就绪中，我有：

---

---

In the dom ready, i have this:

---

$('#Link').toggle(
    function() {
        if (!$("#div2 .tab").is(':animated')) {
            $("#GroupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .tab').slideLeftToggle();});
        }
    },
    function(){
        if (!$("#groupDiv").is(':animated')) {
            $('#div2 .tab').slideLeftToggle(function() {$("#groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", callback);} );
        }
    }
);

---

HTML结构是这样的：

---

---

HTML structure is this:

---

<div id="groupDiv">
     <div id="div1">
          <div class="tab"></div>
     </div>
     <div id="div2">
          <div class="tab"></div>
     </div>
</div>

推荐答案

问题是你的第一个动画div＃GroupDiv所以您的初始检查 if（！$（＃div2 .tab）。is（'：animated'））将为false，直到groupDiv完成动画并且回调为解雇。

The issue is your first animating the div#GroupDiv so your initial check if (!$("#div2 .tab").is(':animated')) will be false until the groupDiv has finished animated and the callback is fired.

您可以尝试

if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated')) 

但我怀疑这将涵盖真正的快速点击。最安全的是使用

however I doubt this will cover really quick clicking. The safest is to unbind the event using

$（this）.unbind（'toggle'）取消绑定事件.unbind（'click'）;

作为if中的第一行，然后您可以取消动画检查。这样做的缺点是你必须使用你传递给自定义动画函数的回调重新绑定。

as the first line inside the if and you can then do away with the animated check. The downside to this is you will have to rebind using the callback you are passing through to your custom animation functions.

这篇关于jQuery - 禁用单击直到所有链接的动画完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！