JQアニメーションが完了した後にクラスを切り替える

Question

アニメーションの後の関数内にあるtoggleClassが正しくトリガーしていないように見えるのに問題があります。コンソールを見ると、要素menuが状態を変化させていることがわかります。これにより、すぐにオンとオフの両方を切り替えることができます。スクロールアニメーションが完了すると、toggleClassが正常に動作します。次のように

私のスクリプトコードは次のとおりです。promise()を使用してに関する同様の質問にリンク

$(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。

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'); 
     } 
    }); 
}