jQuery: EFecto fade y tiempo de espera

[sumolari]

¡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!

[venkman]

A fadein y a fadeout les pueddes pasar una función que se llame cuando acabe el efecto. Así que podrías hacer algo como:

Código javascript:

jQuery(".blank").mouseover(function(){
    jQuery("#logo").fadeOut("normal", function() {
        jQuery("#logo").fadeIn("normal, function() {
            jQuery("#logo").css({ background: 'url(logo.png) no-repeat 0px -100px', });
        });
    });
});
 

Aunque en realidad lo que quieres hacer seguramente sea más bien así:

Código javascript:

jQuery(".blank").mouseover(function(){
    jQuery("#logo").fadeOut("normal", function() {
        jQuery("#logo").css({ background: 'url(logo.png) no-repeat 0px -100px', }, function() {
            jQuery("#logo").fadeIn("normal");
        });
    });
});
 

Porque entiendo que lo que quieres es que se haga fadeOut del lgoo viejo, se cambie cuando lo se ve y luego fadeIn del logo nuevo, ¿no?

[sumolari]

¡Gracias venkman!

Ahora al pasar el cursor por encima el efecto funciona bien, sin embargo si lo dejo sobre el logo, la capa desaparece y aparece continuamente.

También cuando dejo de hacer hover el logo sigue como cuando tengo el cursor por encima.

Me explico un poco mejor:

Ahora uso este código:

Código javascript:

jQuery(".blank").mouseover(function(){
        jQuery("#logo").fadeOut("normal", function() {
            jQuery("#logo").css({ background: 'url(logo.png) no-repeat 0px -100px', }, function() {
                jQuery("#logo").fadeIn("normal");
            });
        });
    });
 
    
    jQuery(".blank").mouseout(function(){
        
        jQuery("#logo").fadeIn("normal");
        
        jQuery("#logo").css({ background: 'url(logo.png) no-repeat 0px 0px', });
    });
 

Si trato de usar el mismo código en el mouseover y el mouseout, el logo desaparece después de pasar el cursor por encima.

Si uso el código que tengo ahora, al pasar por encima del logo el cursor aparece el logo-hover, pero al quitar el cursor de encima del logo y detener el hover no reaparece el logo original.

Si mantengo el cursor encima del logo durante un tiempo, el logo aparece y desaparece continuamente.

Creo que estoy complicando mucho la cosa... no hay ningún modo de que al hacer hover aparezca el "logo-hover" con un pequeño efecto de transformación (algo como esto).

[venkman]

En el enlace que has puesto no veo que haya nada que ocurra en moseover ni nada con el cambio de imágenes. Con eso y con la explicación que has dado, no sé qué es lo que quieres hacer.

Prueba a explicarlo con palabras, sin código, diciendo qué es lo que quieres hacer que pase.


Si lo que quieres es que sólo ocurra una vez en el mouseover, podrías modificar el código que te he puesto así:

Código javascript:

jQuery(".blank").mouseover(function(){
    jQuery("#logo").fadeOut("normal", function() {
        jQuery("#logo").css({ background: 'url(logo.png) no-repeat 0px -100px', }, function() {
            jQuery("#logo").fadeIn("normal");
        });
    });
    jQuery(".blank").mouseover(function(){ });
});
 

Con eso se cambia el logo una vez y luego se quita el efecto.

[sumolari]

Me explico mejor:

Quiero que cuando se pase el cursor sobre el logo, este cambie por otro diferente, pero no cambie de forma brusca, sino poco a poco.

Había pensado en hacer un fade out, sustituir el logo y luego hacer un fade in, con lo que se veia como desaparecía el logo inicial y reaparecía un nuevo logo.

En el ejemplo que he puesto prueba a darle el botón que dice "Run", verás como el CSS cambia, pero no de forma brusca, sino "poco a poco".

Eso es lo que quiero hacer, pero no con anchuras, bordes y demás, sino moviendo la imagen de fondo de 0px 0px a 0px -100px (dejando ver el nuevo logo).

EDITO:

He buscado un poco más por Google y he encontrado un plugin para jQuery que permite hacer animaciones con las posiciones de los fondos.

Lo he aplicado a mi logo y listo, ahora tiene un pequeño efecto al poner el cursor sobre él: parece como si subiese hacia arriba, mostrando el logo-hover en su antigua posición.

El plugin del que hablo es este, y hay un tutorial sobre cómo aplicarlo en esta página.