Плавное изображение исчезает, меняйте src и добавляйте в jquery

Question

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

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

1.) Исчезают картинки

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

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

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

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

1.) Исчезают картинки

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

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

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

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

Спасибо.

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

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

#Image - это тег IMG

Answer 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);
      });
   });
});