如何等待幻灯片在单击下一个按钮之前切换完成

how to wait slideToggle finish before next button click

本文关键字：按钮 下一个 单击 何等待 等待 幻灯片      更新时间：2023-09-26

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

如何让我的按钮一直等到幻灯片结束？我的意思是在下一次点击之前等待。如果我添加insert.stop()，它只是停止垃圾邮件，直到slideToggle完成。

嗯，考虑到您想在动画运行的一段时间内使按钮不可点击，而不是停止动画(通常会清除动画队列(，我会利用JQuery的slideToggle()回调。

考虑示例代码：

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

另一种可能性是检测元素是否正在设置动画，然后返回。您可以使用animated选择器进行此操作。如果你想禁用你的按钮，那么@James的答案就是你的选择。

$('.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>

相关文章：