jQuery 防止多次点击，直到动画完成

Question

目前我有一些设置，用户单击图像并根据该图像，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

<div class="1 hide_show">1</div>
<div class="2 hide_show" style="display: none">2</div>
<div class="3 hide_show" style="display: none">3</div>

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

​

Answer 1

虽然你已经得到了答案..你可以检查是否有任何元素使用 :animated 进行动画处理。 选择器..如果有则返回 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/