Гладкое изображение исчезает, меняет src и исчезает с помощью jquery

Я пытаюсь сделать следующее:

По ссылке нажмите:

1.) затухают img

2.) измените src теперь скрытого изображения

3.), когда img с новым src заканчивает загрузку, исчезает в

В минимальной степени я хотел бы видеть плавное исчезновение одного изображения и постепенное исчезновение другого (в пределах одного и того же тега img путем изменения src)

В конце концов я бы хотел:

1.) затухают img

2.) показать анимированный gif "загрузка изображения"

3.) измените src теперь скрытого изображения

4.) скрыть анимированный gif "загрузка изображения"

5.), когда img с новым src заканчивает загрузку, исчезает в

Спасибо.

Это то, что я пробовал до сих пор. Кажется, что он делает пару вспышек, но только после изменения src (до исчезновения). Странное поведение.

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

#Image является тегом IMG

Ответ 1

Попробуйте следующее:

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