JQ动画完成后切换类[重复]

Posted 2023-05-08

【中文标题】JQ动画完成后切换类[重复]

【英文标题】：Toggling a class after JQ animation completes [duplicate]

【发布时间】：2017-01-15 15:47:43

【问题描述】：

我无法理解为什么动画后函数内部的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.

【问题讨论】：

您希望发生什么确切？列出您预计会发生什么、正在发生什么，以及要采取哪些步骤来解决问题。

我相信你的动画会触发两次，一次是html，一次是body。

@showdev 这正是问题所在。男孩，我觉得自己很傻，考虑到我什至提到它看起来像是开火了两次，但不知道为什么。此外，您关于when 和then 的第二条评论非常简洁。不确定在这种情况下是否完全有必要，因为我两次调用动画，但将来可能会有所帮助。非常感谢您的帮助！

这也是相关的：Callback of .animate() gets called twice jquery.

【参考方案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');
        
    );

【讨论】：

根据this post的说法，仅使用其中一个选择器时可能存在浏览器兼容性问题。

是的，我使用了您建议的链接并通过promise() 让它工作。我会将您的重复项标记为正确答案。再次感谢！