Wait for a function to finish before starting next one

user_15837607 0
Viewed 119

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');
});
async-await wait jquery javascript
2 Answers

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>

user_3839040

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

user_148245450
Related