平滑图像淡出,更改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);
      });
   });
});