de imágenes Smooth fundido de salida, cambiar src, y se desvanecen con jQuery

Question

que estoy tratando de hacer lo siguiente:

El enlace de clic:

1.) desvanecerse a cabo una img

2.) cambiar el src de la imagen oculta ahora

3.) cuando el img src con la nueva termina de cargar, se desvanecen en

mínimamente, me gustaría ver un fundido suave de una imagen y un fundido de entrada de un tro (dentro de la misma etiqueta img src cambiando el)

el tiempo me gustaría:

1.) se desvanecen a cabo una img

2.) muestran una "carga de la imagen" de animación GIF

3.) cambiar el src de la imagen oculta ahora

4.) ocultar la "carga de la imagen" de animación gIF

5.) cuando el img src con el nuevo termina loa ding, fade en

Gracias.

Esto es lo que probé hasta ahora. Parece que hace un par de flashes, pero solo después de que el src cambie (antes del fundido de salida). Comportamiento extraño.

$("#Image").fadeOut(); 
$("#Image").attr("src", NEW_IMAGE_SRC); 
$("#Image").fadeIn(); 

#Image es una etiqueta IMG

Answer 1

Prueba esto:

$('.click').click(function() { 
    $('img.class').fadeOut(300, function(){ 
     $(this).attr('src','new_src.png').bind('onreadystatechange load', function(){ 
     if (this.complete) $(this).fadeIn(300); 
     }); 
    }); 
});