平滑图像淡出，更改src，并使用jquery淡入 [英] Smooth image fade out, change src, and fade in with jquery

问题描述

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

I am trying to do the following:

在链接上点击：

1。）淡出一个img

1.) fade out an img

2。）改变现在隐藏图像的src

2.) change the src of the now hidden image

3。）当img与新的src完成加载，淡入

3.) when the img with the new src finishes loading, fade in

最低限度，我希望看到一个图像的平滑淡出和另一个图像的淡入淡出（在同一个img标记内）通过更改src）

Minimally, I'd like to see a smooth fade out of one image and a fade in of another (within the same img tag by changing the src)

最终我想：

1。）淡出img

2。）显示动画gif加载图片

2.) show a animated gif "loading image"

3。）更改现在隐藏的src图片

3.) change the src of the now hidden image

4。）隐藏动画gif加载图片

4.) hide the animated gif "loading image"

5。）当img与新的src完成加载，淡入

5.) when the img with the new src finishes loading, fade in

谢谢。

这是我到目前为止所尝试的。似乎只有在src改变之后（淡出之前）才会闪烁几次。奇怪的行为。

This is what I tried so far. It seems to do a couple flashes but only after the src changes (prior to the fade out). Strange behavior.

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

#Image 是一个IMG标签

推荐答案

试试这个：

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

这篇关于平滑图像淡出，更改src，并使用jquery淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！