javascript - How do I run one Jquery function only after the first is completely done?

Question

So I am using a toggle button in which a menu is toggled on the side. It slides in and out from the left hand side. I am also using bootstrap so it takes up 2 out of 12 sections of a row, with another div (which I will refer to as div x) taking up the other 10. When the button is pressed I am also toggling the class of div x so that it takes up the entire grid space when the menu is toggled off. The issue is it is changing grid size before the animation is finished which makes it go to the bottom of the page and then back to the top. I want the toggling of div x to be done after the menu has been toggled. I have tried moving it around to different parts of the function, and even creating a different function which is called after, but the same issue arises. Here is what I have:

$('#toggle,.contents').click(function() {
  if ($('#toggle').is(':visible')) {
      $('#moduleList').toggle('slide', {
        direction: 'left'
      }, 1000);

   }else {
    $('#moduleList').toggle('slide', {
      direction: 'left'
    }, 1000, function() {
    });
  }


    $('#toggler').toggleClass('col-md-12 col-md-10');
});

Thanks in advance for any help!

question from:https://stackoverflow.com/questions/65713376/how-do-i-run-one-jquery-function-only-after-the-first-is-completely-done

Answer 1

Place $('#toggler').toggleClass('col-md-12 col-md-10'); inside of your empty function. The function should be called once the animation is complete, following the link @Rajesh mentioned.