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

题

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

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

这是我正在使用的代码：

自定义动画function。

---

//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结构是这样的：

---

Answer 1

问题是你的第一个动画div＃GroupDiv所以你的初始检查if (!$("#div2 .tab").is(':animated'))将是false，直到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')选择器以仅匹配某些链接。

Answer 3

动画可以反复点击的内容是需要注意的，因为它容易出错。 我认为你问题是动画排队并且即使你停止点击也会被执行。 我解决它的方法是在Element上使用stop（）函数。

语法：jQuery（selector）.stop（clearQueue，gotoEnd）//两个参数都是boolean
更多信息

当我点击一个按钮时，我首先停止动画并清除队列，然后继续在其上定义新动画。 gotoEnd可以保持为false（默认值），但如果你愿意，可以尝试将其更改为true，你可能会喜欢结果。

用法示例：jQuery（’button＃clickMe’）。stop（true）.animate（{left：+ = 10}）。

Answer 4

你可以把第一件事放在click事件中

     $（element）.css（{“pointer-events”：“none”}）; 
    

，这在动画的回调函数中

     $（element）.css（{“pointer-events”：“auto”}）;
    

Answer 5

你可以取消绑定……但这也应该有效：

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

Answer 6

我最近制作了一个AJAX jQuery插件，其中包含大量动画。 我发现的AJAX动画错误的解决方法如下。

  $(options.linkSelector).click(function(e){ if ($("#yourNav").hasClass("disabled")) { return false; } else { e.preventDefault(); $("#yourNav").addClass("disabled") // Prepare DOM for new content $(content).attr('id', 'content-old'); $('
', {id: 'ajMultiLeft'}).css({'top': '100%'}).insertAfter('#content-old'); // Load new content $(content).load(linkSrc+ ' ' +options.content+ ' > *', function() { // Remove old content $(content).animate({top: '100%'}, 1000, function(){ $(content-old).remove(); $("#yourNav").removeClass("disabled") }); setBase(); } 

这样做会使每个链接的click事件响应，而父div有一类禁用。 禁用的类由初始单击时的函数设置，并通过最终动画的回调删除。