0

a ver si me podéis echar una mano. Tengo 3 iconos en una web y he realizado un hover mediante jquery a cada uno. Cada vez que pasas el ratón por el icono aparece un bloque que estaba con un display: none;. El problema que tengo es que si paso rápidamente el ratón sobre estos bloques no se realiza bien la función de salida del hover dejando a la vista más de un bloque lo cual queda fatal.

Este es el código jquery:

 jQuery("#column-icon-left").hover(function(){
    jQuery(".hidden-icon-columns").css("opacity", "0").show();
jQuery("#text-icon-left").fadeIn(1000);
jQuery("#icon-hidden-column-left").fadeTo(1000, 1).css("width", "45%").css("padding", "0 100px");
}, function(){
 jQuery(".hidden-icon-columns").hide().css("opacity", "0").css("width", "33.3%").css("padding", "0px");
});

Gracias miles

3
  • 2
    es conveniente poner un .stop() antes de un .fade así frena lo que estaba haciendo y toma lo nuevo, en tu caso puede ser que no terminó de animar el mouse over que ya no detecta el mouse out, podes experimentar también con .finish() que termina y aplica todos los valores finales de la cola de animaciones. o acomodar el html y css para hacerlo directamente por css Commented el 17 jun. 2020 a las 7:29
  • Gracias @aloMalbarez, voy a hacer lo que comentas :) Commented el 18 jun. 2020 a las 2:25
  • Bueno, lo único con lo que he podido solucionar algo es bajando el tiempo de duración de los fades... Commented el 21 jun. 2020 a las 13:26

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.