Javascript 在图像交换功能中添加淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出

我正在尝试淡入淡出图像和gif交换时的过渡。我曾经尝试过使用CSS3转换和不透明度，但它会将gif淡入空白。我尝试过使用fadeIn（）jQuery函数，但没有成功。有人能帮我指出正确的方向吗

代码：

html
javascript:
var sourceSwap=函数（）{
var$this=$（this）；
var newSource=$this.data（'alt-src'）；
$this.data（'alt-src'，$this.attr（'src'）；
$this.attr（'src'，newSource）；
}
$（函数（）{
$（'img[data alt src]'）。每个（函数（）{
new Image（）.src=$（this.data（'alt-src'）；
}).fadeIn（）.hover（sourceSwap，sourceSwap）；
});

---

谢谢

您不能在源代码更改之间淡入淡出

您需要做的是创建两个img元素（位置相同）并隐藏一个

悬停时，将当前可见img上的不透明度转换为0，同时将当前隐藏的img转换为1

这种方法的好处是，所有这些都可以通过CSS来完成。我保留了你的$。每个函数来创建额外的img元素，但如果是我，我会将额外的img添加到你的html中，并纯粹使用CSS来实现

img { transition: opacity 1s;}

---

这里有一个稍微简化的例子：

您还需要这方面的建议吗？

img { transition: opacity 1s;}