¡Hola a todos!
Estaba intentado animar un poco el logotipo de mi blog, y he pensado que estaría bien añadir un efecto al hover del logo, de forma que cuando tienes el cursor sobre el logotipo cambie la imagen.
Es fácil de hacer con CSS, pero quiero añadir un efecto de "transformación" del logo, como si se transformase el logo en el "logo hover".
Así que he recurrido a hacer un Fade con jQuery, con el siguiente código:
Código:
jQuery(".blank").mouseover(function(){
jQuery("#logo").fadeOut("normal");
jQuery("#logo").fadeIn("normal");
jQuery("#logo").css({ background: 'url(logo.png) no-repeat 0px -100px', });
});
El problema es que cuando comienza el FadeOut, el fondo de #logo y es el nuevo logo, de forma que se puede ver el "logo-hover" durante un segundo, antes de que desaparezca.
Lo que quiero hacer es que no se ejecute a la vez el efecto fade y:
Código:
jQuery("#logo").css({ background: 'url(logo.png) no-repeat 0px -100px', });
¿Cómo puedo hacer que no se ejecute esa línea hasta que no acabe el efecto fade?
¡Muchas gracias por la ayuda!