title: Wait for a function to finish before starting next one
body: <p>Probably a very simple question, but I'm a JavaScript newbie:</p>
  <p>How do I wait for the &quot;mouseenter&quot; animation to be finished before starting the &quot;mouseleave&quot; animation?</p>
  <p>Sometimes the mouse movement of the user is very quick but I want that animation to play completely mouseleave action is called.</p>
  <pre><code>
  $('.footer-links').on('mouseenter', function() {
    $(this).addClass('hover');
  });
  
  $('.footer-links').on('mouseleave', function() {
    $(this).removeClass('hover');
  });
  
  </code></pre>