0

所以我有一个向下滑动的 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>
4

3 回答 3

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/

于 2013-03-18T13:50:57.867 回答
0

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

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;
于 2013-03-18T13:48:33.877 回答
0

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

$(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')}
        );
    })
})
于 2013-03-18T13:49:45.447 回答