jQuery Hover animación de cambio de imagen

Question

Tengo una etiqueta IMG con una imagen en escala de grises. Conecté un evento Hover() para cambiar el "src" a una imagen en color al pasar el mouse y volver a la escala de grises en el mouse out.

Esto funciona bien, pero el cambio es abrupto. Me gustaría agregar un ligero fadeIn() al efecto para que el color parezca desvanecerse y desvanecerse. Escribí lo siguiente que pensé que funcionaría, pero no es así. (La imagen cambia, pero no hay fundido o retraso en el efecto). ¿Qué estoy haciendo mal?

  $("#showForm").hover(
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 1

Aquí hay un par de soluciones. Su código no funciona porque está configurando la fuente que cambia la imagen de inmediato.Probablemente sea más fácil simplemente cargar ambas imágenes, superponerlas con CSS y luego desvanecer el color una vez que se pasa el contenedor principal. Como alternativa puede cruzar la decoloración ellos

css

.fader { display: inline-block; } 
.fader img:last-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}​ 

html

<div class="fader"> 
    <img src="http://placehold.it/300x300/000fff" /> 
    <img src="http://placehold.it/300x300/fff000" /> 
</div>​ 

fundido de entrada en mouseover

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() { 
    $(this).find("img:last").fadeToggle(); 
});​ 

moda cruz e

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() { 
    $(this).find("img").fadeToggle(); 
});​ 

Answer 2

$(this).fadeIn('slow', 

es en realidad tratando a desvanecerse en el este elemento, poco a poco, y se refiere esto a

$("#showForm") 

En cambio si se quiere se puede poner la imagen en color directamente sobre la escala de grises actual imagen, y marque la imagen en color oculta, luego haga que se desvanezca lentamente. Suponiendo que estén colocados uno encima del otro, puede hacer:

$("#showForm").hover(
    function() { 
     $("#colorImageID").fadeIn(); 
    }, 
    function() { 
     $("#colorImageID").fadeOut(); 
    }); 
    } 

);

suponiendo que el HTML es algo así como (donde sameAbsolutePosition es css para ponerlos en el mismo lugar, por lo que tal vez algo como posición: absolute; izquierda: 20; top: 20px;):

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition"> 
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition"> 

Para reitere, se desvanecerá una nueva imagen sobre otra imagen. También podría fundir la imagen en escala de grises de forma simultánea.

Answer 3

¿Dónde te estás desvaneciendo? Fundido de hace display:block con la opacidad cambiar de 0 a 100. Fundido a cabo hace display:none con la opacidad cambiar de 100 a 0.

vez, que fadeIn, la imagen es display:block y la opacidad es 100. Por lo tanto, usted no ve una animación . Por lo tanto, haga una pantalla: none o fadeOut before fadeIn nuevamente.

Dado es un ejemplo con explica cosas. Debe cambiarlo según sus requisitos.

$("#showForm").hover(
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 4

Mucho mejor solución:

Olvídate de javascript para hacer este trabajo. Use CSS sprites en su lugar. Si insiste en tener fadeIn, fadeOut, use transiciones.

ACTUALIZACIÓN: Respondiendo a los comentarios a continuación, no puedo escribir ningún código ya que no hay manera de que pueda anticipar las dimensiones y las posiciones en el sprite de Todd. También quiero aclarar que mi sugerencia es usar sprites y luego transiciones para mejorar la "funcionalidad" y no solo las transiciones porque supongo que necesita que esto funcione en IE8 e IE9.

Answer 5

intento con este

$("#showForm").hover(
      function() { 
       $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmall.gif'); 
       $("#img_src").html("images/AddButtonSmall.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      }, 
      function() { 
      $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       $("#img_src").html("images/AddButtonSmallGray.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      } 
     );​ 

Aquí está Fiddle

Answer 6

Usted puede hacer esto fundido encadenado con CSS3 utilizando transición también. No disponible para todos los navegadores, pero aún así ... http://www.w3schools.com/css3/css3_transitions.asp

En forma similar a CSS: image link, change on hover

Por ejemplo:

#showForm 
{ 
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat; 

    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#showForm:hover { 
    background-image: url('images/AddButtonSmall.gif'); 
}