Probablemente una pregunta muy simple, pero soy un novato en JavaScript:
¿Cómo espero a que termine la animación "mouseenter" antes de comenzar la animación "mouseleave"?
A veces, el movimiento del mouse del usuario es muy rápido, pero quiero que la animación se reproduzca completamente. Se llama acción mouseleave.
$('.footer-links').on('mouseenter', function() { $(this).addClass('hover'); }); $('.footer-links').on('mouseleave', function() { $(this).removeClass('hover'); });Si usa transition o animation CSS, use los eventos "transitionend" o "animationend" respectivos:
Para mantener el estado de desplazamiento mientras se desplaza, mueva la devolución de llamada "transitionend" dentro del "mouseleave" y asegúrese de usar en CSS tanto :hover como class .hover juntos.
$('.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>Debe vincular tipos de eventos para verificar la animación css.
el.addEventListener("animationstart", function() {}, false); el.addEventListener("animationend", function() {}, false); el.addEventListener("animationiteration", function() {}, false); Puede agregar eventos profijados apropiados, así como webkitAnimationEnd