Переключение класса после завершения анимации JQ

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