在动画完成之前，jQuery会阻止多次点击

目前我有一些设置，用户点击图像并基于该图像，div将淡入/淡出。

如果用户发疯并同时点击一堆图像，则会加载多个div，而不仅仅是最后请求的div。

我试图在这里说明我的问题。 http://jsfiddle.net/BBgsf/

单击任何这些图像将加载相应的div与数字。 但是如果在动画完成之前单击不同的图像，它也会加载其他div。

jQuery的

$(".flow-chart img").click(function () { var div_class = $(this).data("class"); $(".hide_show:visible").fadeOut('slow', function() { $("."+div_class).fadeIn("slow"); }); }); 

HTML

 
1
 
2
 
3 

如何防止多个div加载而不是一次只加一个？

Answer 1

一种方法是跟踪动画当前是否处于活动状态。 这是一个简单的方法： http ： //jsfiddle.net/QCWgR/

 var active = false; $(".flow-chart img").click(function () { if (active) { return; } active = true; var div_class = $(this).data("class"); $(".hide_show:visible").fadeOut('slow', function() { // note the callback that sets active to false at end of animation $("."+div_class).fadeIn("slow", function() { active = false; }); }); }); 

使用这种方法，第一次单击必须完成动画循环才能发生下一个动画循环。

使用闭包来保持活动的全局命名空间

要保持活动状态不在全局命名空间中，您可以在匿名闭包内运行整个块，如下所示：

http://jsfiddle.net/QCWgR/2/

 (function () { var active = false; $(".flow-chart img").click(function () { if (active) { return; } active = true; var div_class = $(this).data("class"); $(".hide_show:visible").fadeOut('slow', function() { $("."+div_class).fadeIn("slow", function() { active = false; }); }); }); })();​ 

Answer 2

虽然你已经得到了答案..你可以检查是否有任何使用：动画选择器动画的元素..如果有返回false

 $(".flow-chart img").click(function() { if ($(".hide_show").filter(':animated').length > 0) { return false; } var div_class = $(this).data("class"); $(".hide_show:visible").fadeOut('slow', function() { $("." + div_class).fadeIn("slow"); }); });​ 

http://jsfiddle.net/FaKBs/