jQuery - 禁用单击直到所有链接的动画完成

Question

题

下面的解决方案是向下滑动groupDiv显示div1和足够的空间让div2滑入.这都是通过链接#Link.Click()元素上的动画来实现的.

但是,当快速点击链接时,似乎会出错.有办法防止这种情况吗？通过禁用Click功能,直到链式动画完成？我目前有检查,但他们似乎没有做这项工作:(

这是我正在使用的代码:

自定义动画功能.

---

//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准备好了,我有这个:

---

$('#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结构是这样的:

---

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

Answer 1

问题是你的第一个动画div#GroupDiv所以你的初始检查 if (!$("#div2 .tab").is(':animated'))将是假的,直到groupDiv完成动画并且回调被触发.

你也许可以试试

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

但我怀疑这将涵盖真正的快速点击.最安全的是使用解除绑定事件

$(this).unbind('toggle').unbind('click');

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

Answer 2

您可以在动画运行时轻松禁用链接

$('a').click(function () {
    if ($(':animated').length) {
        return false;
    }
});

您当然可以替换$('a')选择器以仅匹配某些链接.