Question

我很难理解为什么动画之后我的toggleClass内部功能似乎没有正确触发。在查看控制台时，您将能够看到元素menu正在改变状态，这使我认为它正在快速切换打开和关闭。滚动动画完成后，toggleClass将按预期工作。

我的脚本代码如下：

  $(document).ready(function() {

    // initToggle();
    stickyNav();
    toggleMenu();

  });

  function stickyNav() {

      var navOffset = $('.nav-bar').offset().top;

      $(window).scroll(function() {
          var nav = $('.nav-bar');
          var scroll = $(window).scrollTop();

          if (scroll >= navOffset) {
              nav.addClass('fixed');
          } else {
              nav.removeClass('fixed');
          }
      });
  }

  function toggleMenu() {
      $('.nav-menu').click(function() {
          if (!$('.nav-bar').hasClass('fixed')) {
              $('html, body').animate({scrollTop: $('.nav-bar').offset().top}, '800',
              function() {
                  $('.menu').toggleClass('active');
                  $('body').toggleClass('no-scroll');
              });
          } else {
              $('.menu').toggleClass('active');
              $('body').toggleClass('no-scroll');
          }
      });
  }

HERE is a "working" codepen of my code which better displays the issue I'm having.

Answer 1

@showdev链接到与使用promise()相关的类似问题。

通过将脚本更改为以下内容来使脚本生效：

function toggleMenu() {
    $('.nav-menu').click(function() {
        if (!$('.nav-bar').hasClass('fixed')) {
            $('html, body').animate({scrollTop: $('.nav-bar').offset().top}, '800').promise().done(function() {
                $('.menu').toggleClass('active');
                $('body').toggleClass('no-scroll');
            });
        } else {
            $('.menu').toggleClass('active');
            $('body').toggleClass('no-scroll');
        }
    });
}

在JQ动画完成后切换类

1 个答案: