防止點擊觸發，如果用戶cliks動畫

Question

我有一個.box股利，並點擊它展開。

問題是，如果你快速點擊多次在該div上，點擊事件將觸發新的動畫和動畫將運行每一次點擊。

HTML

<div class="box"> 
    <div class="title"> 
     <label>Some title</label> 
    </div> 
    <div class="text"> 
     <label>Some text that is longer then the title text</label> 
    </div> 
</div> 

JQuery的

$('.box').toggle(function() { 
    $(this).attr("selected", "true"); 
    $(this).animate({"height": "529px", "width": "460px"}, "slow"); 
},function() { 
    $(this).animate({"height": "163px", "width": "220px","z-index":"10"}, "slow"); 
}); 

我想以某種方式禁用點擊直到動畫完成一次。

這可能嗎？

Click fast many times on the yellow div。

Answer 1

使用.is(':animated')檢查對象此刻動畫，像這樣做，例如http://jsfiddle.net/65W2G/：

$('.box').toggle(function() { 
    if ($(this).is(':animated')) { 
     return; 
    } 
    $(this).attr("selected", "true");  
    $(this).animate({"height": "529px", "width": "460px"}, "slow"); 
}, function() { 
    if ($(this).is(':animated')) { 
     return; 
    } 
    $(this).animate({"height": "163px", "width": "220px","z-index":"10"}, "slow"); 
}); 

Answer 2

你應該綁定到單擊事件處理程序，而不是使用切換，因爲它是在jQuery的1.8棄用和去除的jQuery 1.9

$('.box').click(function() { 
    var $this = $(this); 
    if($this.is(':animated')){ 
     return false; // return false if it's already animating 
    } 
    // determine height/width to animate too 
    var height = $this.height() == 529 ? '163px': '529px'; 
    var width = $this.width() == 460 ? '200px' : '460px'; 

    $this.attr("selected", "true"); 
    $this.animate({"height": height, "width": width}, "slow"); 
}); 

FIDDLE