javascript - 平滑图像淡出，更改 src，并使用 jquery 淡入

Question

我正在尝试执行以下操作:

点击链接:

1.) 淡出一个img

2.) 更改现在隐藏图像的 src

3.) 当带有新 src 的 img 完成加载时，淡入

至少，我希望看到一张图片平滑淡出而另一张图片淡入(通过更改 src 在同一 img 标签内)

最后我想:

1.) 淡出一个img

2.) 显示动画 gif“加载图像”

3.) 更改现在隐藏图像的 src

4.) 隐藏 gif 动画“加载图像”

5.) 当带有新 src 的 img 完成加载时，淡入

谢谢。

到目前为止，这是我尝试过的。它似乎做了几次闪烁，但只是在 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);
      });
   });
});