jquery - 尝试在悬停时淡出 image1 并淡入 image2，然后在推出时反转此过渡。想法？

Question

我有一个 logomark.png，我想在悬停时淡出/过渡到 logotext.png，然后在推出时再次返回。

作为效果，悬停时 logomark.png 淡出到 0 不透明度，而 logotext.png 从 0 淡出到 1 不透明度。

当用户将鼠标从图像上移开时，它会反转：logotext.png 的不透明度从 1 变到 0，而 logomark.png 的不透明度从 0 变回 1。

基本上，交叉淡入淡出。但是因为这些图像有透明的背景，所以它并不像把一张放在另一张上那么简单，因为两者都可以看到。它实际上必须始终隐藏一个。

在过渡期间添加模糊效果看起来也很棒。当不透明度从 0 变为 1 时，图像会随着淡入到完全不透明度而变得模糊。然后它在不透明度 1 处没有模糊。

最后，如果能够调整过渡的时间，那就太好了。

任何帮助将不胜感激。

-谢谢

Answer 1

如果您使用的是 jquery，那么它非常容易

$('.img').hover(function(){
$(this).fadeOut(function(){
$(this).attr("src","logotext.png");
$(this).fadeIn();
})},
function(){
$(this).fadeOut(function(){
$(this).attr("src","logomark.png");
$(this).fadeIn()
})})