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

Question

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

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

当用户将鼠标移离图像时，它会反转：logotext.png从1变为0不透明度，而logomark.png则从0变为1不透明度。

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

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

最后，能够调整过渡时间会很棒。

非常感谢任何帮助。

-Thanks

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