如何等待的slideToggle完成下一個按鈕，然後再按一下

Question

$('.mybutton').click(function(){ 
 
$('.someclasstohide').slideToggle(500) 
 
})

如何讓我的按鈕，等到滑完了？ 我的意思是等待下一次點擊。如果我添加insert.stop()，它只會停止發送垃圾郵件，直到slideToggle完成。

Answer 1

嗯，考慮到你想讓按鈕在運行動畫的時間段內不可點擊而不是停止動畫（清除動畫隊列，通常這樣做），我會利用JQuery's slideToggle() callback。

考慮示例代碼：

$('.mybutton').click(function(){ 
    // Disable the button 
    $(this).prop("disabled", true); 

    $('.someclasstohide').slideToggle(500, function(){ 
     // Reenable the button 
     $('.mybutton').prop("disabled", false); 
    }); 
}) 

Answer 2

另一種可能性是檢測，如果你的元素被動畫，並返回。您可以使用animated選擇器。如果你想讓你的按鈕被禁用，那麼@詹姆斯的答案就是要走的路。

$('.mybutton').click(function() { 
 
    
 
    var classToHide = $('.someclasstohide'); 
 
    
 
    if(classToHide.is(':animated')) return; 
 
    
 
    classToHide.slideToggle(500); 
 
    
 
});

#test { 
 
    width: 50px; 
 
    height: 100px; 
 
    background: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="mybutton"> 
 
    Click me 
 
</button> 
 

 
<div id="test" class="someclasstohide"></div>