imagen de fondo jquery - fadeOut/fadeIn en hover

Question

Tengo un <div> que contiene una imagen de fondo, el <div> se encuentra dentro de una barra de herramientas en HTML.

HTML:

<div id="toolbar"> 
    <div class="image">&nbsp;</div> 
</div> 

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 ratón pasa sobre #toolbar Quiero que la imagen de fondo de .image para cambiar pero utilizando .fadeOut() y .fadeIn()

Hasta ahora he :

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

Actualmente, el logotipo se desvanece y el logotipo del elemento estacionario se desvanece dos veces.

Cualquier ayuda apreciada.

Answer 1

//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 
}); 

Answer 2

Puesto que no puede desaparecer una imagen de fondo, puede probar switchClass() que puede establecer a un temporizador. No estoy seguro de que te desvanezcas y te desvanezcas, pero es posible que obtengas un efecto refrescante.

Por lo tanto, sería algo así como:

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

Answer 3

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

Puede hacer algo de esto con las transiciones de CSS. Sólo se pueden utilizar las transiciones en los valores establecidos en el CSS y no son en todos los navegadores todavía:

/* 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 de desvanecimiento bastante por encima del mouse, el cambio en la opacidad todavía va a pasar en el IE, pero sin la transición de desvanecimiento.

Otra opción es desvanecer las imágenes hacia adentro y hacia afuera una encima de la otra - puedes hacer esto con jQuery hover events o CSS, pero en cualquier caso necesitarás que las imágenes estén absolutamente posicionadas una encima de la otra .