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

的方法之一就是保持如果動畫是當前活動的軌跡。這裏有一個簡單的方法來做到這一點：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

雖然你已經得到了一個答案..你可以檢查是否有任何使用: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/