Question

所以我有一个显示菜单的向下滑动div，但如果你快速点击按钮，结果就不太理想了。我想按钮在动画完成之前什么也不做，同样在另一端。这就是我到目前为止所拥有的

$(function () {
    $('#header .exploreExpandBtn a').live( 'click', function (e) {
        e.preventDefault();
        $(this).parent().toggleClass('open');
        $('.exploreNav').stop(true,true).slideToggle();
    })
})

和我的HTML

<h2 class="exploreExpandBtn logoBtn"><a class="ir" href="#menu-explore-menu" <strong>Explore</strong></a></h2>

<div class="exploreNav clearfix">
<div class="bgShadow clearfix">
<div class="wrap clearfix">
<?php wp_nav_menu( array( 'theme_location' => 'global-explore-menu' ) ); ?>
</div>
</div>
</div>

Answer 1

尝试：

$(function () {
    $('#header .exploreExpandBtn a').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        $('.exploreNav:not(:animated)').stop(true, true).slideToggle(400, function(){
            $this.parent().toggleClass('open');
        });
    });
});

请注意，我选择400作为动画的持续时间，因为它是slideToggle附带的默认持续时间。文档：http://api.jquery.com/slideToggle/

Answer 2

使用变量检查动画是否正在进行中

var animDone = true;

在动画制作div之前

//Set to false before animating
animDone = false;
$('.exploreNav').stop(true,true).slideToggle(500,function(){
    //Then true when animation has been done
    animDone = true;
});

在按钮中单击回调或您想要的任何内容，测试变量并在动画正在进行时返回false：

if(!animDone)
    return false;

Answer 3

单击时禁用按钮，并在动画完成后启用它。

$(function () {
    $('#header .exploreExpandBtn a').live( 'click', function (e) {
        e.preventDefault();
        $(this).parent().toggleClass('open');
        $(this).attr('disabled', 'disabled');
        var that = this; //to refer to the link in the complete function
        $('.exploreNav').stop(true,true).slideToggle(
                 {complete: function() { $(that).removeAttr('disabled')}
        );
    })
})

在向下滑动div上禁用按钮单击jquery

3 个答案: