在动画时使元素不可点击

我正在尝试使元素在动画时不可点击。 动画完成后，我希望它再次可以点击。 我已经搜索了很长时间以获得有关如何实现这一目标的一些帮助，但我无法让它工作，我不知道为什么。

HTML：

 Allright BCD  

单击字母A时，它会向左移动，然后某些文本会在其旁边淡入淡出。

jQuery：

 (function() { var letterA = $('#a'), llright = $('#llright'); $('#a:not(.open)').live('click', function() { letterA.animate({ marginRight: "5.7in", }, 1300, function() { letterA.addClass('open'); llright.fadeIn(1300); // Animation complete. }); }); $('#a.open').live('click', function() { llright.fadeOut(700); letterA.delay(700).animate({ marginRight: "0.0in", }, 700, function() { letterA.removeClass('open'); }); }); })(); 

动画效果很好，但这不是：

 if(letterA.is(':animated')) { letterA.unbind('click'); }; 

最后一部分根本不起作用，即使我插入一个简单的alert（）而不是unbind（）它似乎没有弄清楚A何时移动而不是。

我真的可以在这里使用一些帮助，我已经尝试了我能想到的一切。

Thx / Oscar

Answer 1

您的支票仅在页面加载时运行。 在click函数内部进行检查：

 $('#a:not(.open)').live('click', function() { if(!letterA.is(':animated')) { letterA.animate({ marginRight: "5.7in", }, 1300, function() { letterA.addClass('open'); llright.fadeIn(1300); // Animation complete. }); } }); 

另外，不推荐使用live（）; 考虑转到on（）。

Answer 2

只需一个带有内部分支的点击处理程序，以满足不同的情况，这是更经济的; 前进动画，反向动画以及动画正在进行时拒绝。

你也可以通过测试llright的状态而没有addClass / removeClass（’open’）。

这样的事情应该这样做：

 $('#a').on('click', function() { var $this = $(this), llright = $this.next("span"); if($this.is(":animated") || llright.is(":animated")) { return;//reject (no action) } if(llright.is(":visible")) { //reverse animation sequence llright.fadeOut(700, function(){ $this.animate({ marginRight: 0, }, 700); }); } else { $this.animate({ //forward animation sequence marginRight: "5.7in", }, 1300, function() { llright.fadeIn(1300); }); } }); 

另请注意，使用此代码时，不必使用.live() 。