Entonces, tengo una imagen que se mostrará cuando se pase el mouse sobre cierto texto, se retrasará cuando se quite el mouse antes de desaparecer y eso funciona bien. Pero tengo varias imágenes que pueden aparecer según el texto que se desplace, quiero que la primera imagen omita su retraso si se pasa el mouse sobre otro texto para que no expanda la página y apile las imágenes. es posible? ¿O solo tendré que quitar el retraso? Esto se hace dentro de JQuery
$("h2").mouseover(function () { let mouseText = $(this).attr("class").split(" ")[0]; switch(mouseText) { case "wh-light": imgID += mouseText; break; case "wh-hl-ll": imgID += mouseText; break; case "part-hh-ll": imgID += mouseText; break; } $(imgID).show(); }); $("h2").mouseout(function () { $(imgID).delay(1000).hide(0); });Puedo proporcionar el HTML, pero no creo que sea demasiado relevante para esto. ¡Gracias de antemano por su ayuda!
Sin tener su plantilla y el código completo, tendría que idear un ejemplo completo... pero el siguiente fragmento debería brindarle un buen ejemplo de lo que tendrá que hacer. Deberá realizar un seguimiento de la imagen actual y su devolución de llamada debe saber cuál era la imagen actual cuando se inició el retraso y compararla con la actual para saber si debería hacer algo o no.
Por esta razón, extraje el código en funciones javascript separadas y usé setTimeout en lugar de jquery delay(). La documentación en el sitio real de jquery incluso menciona que la función de retraso es limitada y no tiene forma de cancelarse y, como tal, no debe tratarse como un reemplazo de setTimeout().
Referencia https://api.jquery.com/delay/
El método .delay() es mejor para retrasar entre efectos jQuery en cola. Debido a que es limitado, por ejemplo, no ofrece una forma de cancelar el retraso. Delay() no es un reemplazo para la función setTimeout nativa de JavaScript, que puede ser más apropiada para ciertos casos de uso.
Sin saber cómo estaba construyendo la variable imgID o cómo la limpiaba... Agregué las variables baseImageID y targetImageID para que no termine concatenando continuamente las nuevas cadenas al final de imgID...
Como última nota... Me gusta hacer las cosas muy modulares y detalladas cuando hablo de una solución, así que no odien las funciones adicionales... Creo que hacen que la solución sea más fácil de entender. La implementación real se puede simplificar...
let baseImageID = 'image-'; let targetImageID = ''; let currentImageID = ''; const hideImageNow = function(imageID) { $(imageID).hide(); if (currentImageID == imageID) { currentImageID = ''; } }; const hideImageLater = function(imageID, delay) { setTimeout(hideImageNow, delay, imageID); }; const showImage = function(imageID) { if (currentImageID != '') { hideImageNow(currentImageID); } currentImageID = imageID; $(imageID).show(); }; $("h2").mouseover(function() { targetImageID = baseImageID; let mouseText = $(this).attr("class").split(" ")[0]; switch (mouseText) { case "wh-light": targetImageID += mouseText; break; case "wh-hl-ll": targetImageID += mouseText; break; case "part-hh-ll": targetImageID += mouseText; break; } showImage(targetImageID); }); $("h2").mouseout(function() { hideImageLater(currentImageID, 1000); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>