jquery – fadeOut / fadeIn imagen de fondo al pasar el mouse

Tengo un

que contiene una imagen de fondo, el

encuentra dentro de una barra de herramientas en HTML.

HTML:

  
 

CSS:

 #toolbar .image { background url('images/logo.png') no-repeat top left; } #toolbar .imagehover { background url('images/logoHover.png') no-repeat top left; } 

Cuando el mouse se #toolbar sobre #toolbar , quiero que #toolbar la imagen de fondo de .image pero usando .fadeOut() y .fadeIn()

Hasta ahora tengo:

 $("#toolbar").hover(function () { $(".image").fadeOut("slow"); $(".image").addClass("imagehover"); $(".imagehover").fadeIn("slow"); }, function () { $(this).removeClass("imagehover"); }); 

Actualmente el logotipo se desvanece y el logotipo de desplazamiento se desvanece dos veces.

Cualquier ayuda apreciada.

 //Use the fad in out callback $("#toolbar").hover(function () { $(".image").fadeOut("slow", function () { $(this).addClass("imagehover").fadeIn("slow", function () { $(this).removeClass("imagehover"); }); }); }); //or you can use animate $("#toolbar").animate({ "class": "imagehover" }, "slow", 'easein', function () { //do what every you want }); 

No hay forma de hacer transiciones suaves entre imágenes en jQuery, no sabe cómo traducir entre una imagen y la siguiente. Puedes hacer transiciones de color con un plugin.

Puedes hacer algo de esto con las transiciones de CSS. Solo puedes usar transiciones en valores establecidos en CSS y aún no están en todos los navegadores:

 /* faded out logo class */ .faded-logo { opacity: 0.30; /* FX, Safari, GC, Opera, decent browsers */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */ filter: alpha(opacity=30); /* IE */ background: url('images/logo.png') no-repeat top left; /* in Safari, FX and Chrome add a fade transition */ -webkit-transition: opacity .25s linear .1s; transition: opacity .25s linear .1s; } /* no opacity on hover */ .faded-logo:hover { opacity: 1; /* FX, Safari, GC, Opera, decent browsers */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */ filter: alpha(opacity=100); /* IE */ } 

Esto tendrá un efecto bastante desvanecido en el mouseover, el cambio en la opacidad seguirá ocurriendo en IE, pero sin la transición de desvanecimiento.

Otra opción es atenuar las imágenes dentro y fuera una de la otra: puede hacer esto con los eventos de jQuery hover o CSS, pero en cualquier caso necesitará que las imágenes se coloquen absolutamente una encima de la otra.

Ya que no puedes desvanecer una imagen de fondo, puedes probar switchClass() que puedes establecer en un temporizador. No estoy seguro de que obtendrías un fundido puro y desaparecería, pero podrías obtener un efecto morfo genial.

Entonces sería algo como:

 $("#toolbar img:hover").switchClass("image","imagehover", "slow");