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

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

在链接点击：

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