Lisser les images, changer src et fondre avec jquery

Je suis en train de faire ce qui suit:

Sur le lien cliquez sur:

1.) fade out un img

2.) changer le src de l'image cachée

3.) lorsque l'img avec le nouveau src ait fini de charger, fondu dans

Peu, j'aimerais voir une douceur fade out d'une image et d'un fondu de l'autre (dans la même balise img par la modification de la src)

Finalement, je voudrais:

1.) fade out un img

2.) afficher un gif animé "chargement de l'image"

3.) changer le src de l'image cachée

4.) masquer le gif animé "chargement de l'image"

5.) lorsque l'img avec le nouveau src ait fini de charger, fondu dans

Grâce.

C'est ce que j'ai essayé jusqu'à présent. Il semble faire quelques bouffées de chaleur, mais seulement après la src changements (avant le fade out). Comportement étrange.

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

#Image est une balise IMG

source d'informationauteur Brian David Berman

  1. 36

    Essayez ceci:

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