平滑图像淡出，改变src，用jquery淡入

Posted 2023-05-08

【中文标题】平滑图像淡出，改变src，用jquery淡入

【英文标题】：Smooth image fade out, change src, and fade in with jquery

【发布时间】：2012-04-15 03:20:30

【问题描述】：

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

点击链接：

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标签

【问题讨论】：

到目前为止您尝试过什么？你在哪里卡住了？另外，考虑使用精灵。

【参考方案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);
      );
   );
);

【讨论】：

很棒的答案，事实证明这比链接fadeOut和fadeIn要顺畅得多