在开始下一个之前等待 function 完成

Question

Probably a very simple question, but I'm a JavaScript newbie:

How do I wait for the "mouseenter" animation to be finished before starting the "mouseleave" animation?

Sometimes the mouse movement of the user is very quick but I want that animation to play completely mouseleave action is called.

$('.footer-links').on('mouseenter', function() {
  $(this).addClass('hover');
});

$('.footer-links').on('mouseleave', function() {
  $(this).removeClass('hover');
});

Answer 1

If you use CSS transition or animation use the respective "transitionend" or "animationend" events:

To keep the hover state whilst hovered, move the "transitionend" callback inside the "mouseleave" Event and make sure to use in CSS both the :hover and the class .hover together!

 $('.footer-links').on({ mouseenter() { $(this).addClass('hover'); }, mouseleave() { $(this).on("transitionend", function() { $(this).removeClass('hover'); }); } });

 .footer-links { transition: background 2s ease-out; }.footer-links:hover, .footer-links.hover { background: red; }

 <div class="footer-links">TEST ONE</div> <div class="footer-links">TEST TWO</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 2

You need to bind kind of events for checking css animation.

el.addEventListener("animationstart", function() {}, false);
el.addEventListener("animationend", function() {}, false);
el.addEventListener("animationiteration", function() {}, false);

You can add appropriate profixed-events as well like webkitAnimationEnd