Usar fade in / fade out con jquery

Estoy trabajando en mis proyectos para estudiantes y soy un jQuery nuevo, para el proyecto tengo que usar jquery para mejorar algunas funciones y he aprendido mucho para llevar a cabo tareas básicas, pero estoy atascado en algo muy confuso.

Uno de mis scripts realmente cambia la imagen de un contenedor div en el mouse sobre la función, la función actualmente está bien, pero hace que se sienta un poco hermoso. Quiero agregarle efectos de transición, ya sea a través de funciones de atenuación gradual o de animación pero no puedo trabajar. fuera con ambos. Busqué en internet, pero aquí no puedo relacionar esos ejemplos con la mente aquí.

Solo quiero saber dónde puedo insertar fade in o fade out en este código para darle un efecto de transición:

$(document).ready(function () { $(".thumb").hover(function () { var dummyImg = $(this).attr("alt"); $(this).attr("alt", $(this).attr("src")); $(this).attr("src", dummyImg); }, function () { var dummyImg = $(this).attr("src"); $(this).attr("src", $(this).attr("alt")); $(this).attr("alt", dummyImg); }); }); 

¡Gracias!

Desea acceder a la función de callback de las funciones fadeIn y fadeOut, esto le permitirá realizar cambios en la imagen src y cuáles no. se vería algo como esto ->

 $(document).ready(function () { $(".thumb").hover(function () { var dummyImg = $(this).attr("alt"); $(this).fadeOut('slow', function(){ //this is now the callback. $(this).attr("alt", $(this).attr("src")); $(this).attr("src", dummyImg); $(this).fadeIn('slow'); }); }, function () { var dummyImg = $(this).attr("src"); $(this).fadeOut('slow', function(){ //this is now the callback. $(this).attr("src", $(this).attr("alt")); $(this).attr("alt", dummyImg); $(this).fadeIn('slow'); }); }); }); 

Maven

¿Has pensado en utilizar el webkit css? Este artículo de SO entra en detalles para el cruce de imágenes, a diferentes velocidades. CSS Webkit Transition – Desaparece lentamente que Fade in

También puede hacer uso de un evento básico para la aparición / desaparición gradual de la imagen. Este artículo de JQuery / JSFiddle SO hace uso de this objeto de referencia: Jquery fadeOut on hover

La estructura básica de entrada / salida de la documentación de JSFiddle.net es la siguiente:

 $('#show').hover(function() { $(this).stop(true).fadeTo("slow", 0); }, function() { $(this).stop(true).fadeTo("slow", 1); }); 

~ JOL

Personalmente, coloco las dos imágenes (css) para que la versión sin desplazamiento esté normalmente en la parte superior. Luego, en la función de desplazamiento, agregue $ (this) .fadeOut (‘fast’) para que se muestre la imagen subyacente.

http://jsfiddle.net/Xm2Be/13/ Hay un ejemplo de cómo puedes hacer eso. Por supuesto, puede establecer la duración del efecto de fundido colocando algunos números entre corchetes. Para examle .fadeToggle (5000) tendrá un tiempo de 5 segundos.