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