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

我有一個.box股利，並點擊它展開。防止點擊觸發，如果用戶cliks動畫

問題是，如果你快速點擊多次在該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。

來源

2013-03-03 Vucko

僅供參考..切換事件處理程序已在jQuery的1.8和r棄用emoved在jQuery 1.9 http://api.jquery.com/toggle-event/ – 2013-03-03 22:27:32

@wirey什麼是替代切換呢？ – Vucko 2013-03-03 22:28:56

切換隻是綁定到點擊事件 - 所以你可以綁定到點擊事件手處理它在那裏 – 2013-03-03 22:35:16

使用.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"); 
});

來源

2013-03-03 22:29:00

你應該綁定到單擊事件處理程序，而不是使用切換，因爲它是在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

來源

2013-03-03 22:33:50

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

回答

相關問題