javascript - JQ 动画完成后切换类

Question

这个问题已经有答案了:

jQuery $.animate() multiple elements but only fire callback once (2 个回答)

已关闭 6 年前。

我无法理解为什么我的 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');
        }
    });
}