jquery - 在toggleClass之后禁用和启用单击

Question

我正在使用一个汉堡菜单图标，点击后会发生变化。

动画是通过 .toggleClass 进行的

$(document).ready(function() {
  $('#nav-hamburger-big').click(function() {
    $(this).toggleClass('open');
  });
});

示例:http://jsfiddle.net/ampnuwsd/8/

此图标会触发基本的引导菜单。但是我注意到，如果页面仍在加载，或者当您非常快地第二次单击它时，当您单击它时，动画会挂起。它仍然会触发菜单弹出打开，但是转换只是跳过，这会导致反转图标(菜单关闭时为 X，菜单打开时为汉堡)

有没有什么办法可以在第一次点击完成后延迟点击，比如说 1.5 秒？

编辑:滚动脚本:

<script>
// script for smooth scrolling to anchor points
$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 901, 'swing', function() {

    });
  });
});
</script>

亲切的问候。

Answer 1

您可以暂时禁用按钮，直到转换以 promise 结束，或者在 .is(':animated') 时不切换类

或更简单地说:

$('#nav-hamburger-big').click(function() {
    $('#menu').is(':hidden') ? $(this).removeClass('open') : $(this).addClass('open');
});

编辑:

基于 fiddle :

1. 您需要更改按钮以获取 ID nav-hamburger-big
2. 将第一个 css 行更改为 #nav-hamburger-big div {

然后:

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    //disable the button first
    $('#nav-hamburger-big').prop('disabled',true);
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 901, 'swing', function() {
      //now re-enable
      $('#nav-hamburger-big').prop('disabled',false);
    });
  });
});