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
.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