图像淡入淡出

Question

我有一个菜单（img.b和img.a）叠加的2图像类，img.b默认情况下为0以上，我需要使img.a淡出而另一个淡入..像我的代码，img.a保持在淡入淡出的（2类有透明度，所以你可以看到他们一个在另一个）..尝试了几个解决方案，但我最终影响到所有纽扣在一起。

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.b").hover(
function() { 
$(this).stop().animate({"opacity": "1"}, "fast"); 
}, 
function() { 
$(this).stop().animate({"opacity": "0"}, "fast"); 
}); 
}); 
</script> 


img.a { 
    z-index: 1; 
    position:absolute; 
     } 

img.b { 
    position:absolute; 
    opacity: 0; 
    z-index:10; 
    } 

Answer 1

这与this previous question相似。你所要做的就是交叉淡化。 This article解释得很好。

您可能也有兴趣crossfading with CSS。

真正的问题是，由于它是单线程，实际上很难在JavaScript中实现真正的淡入淡出。所有'淡入淡出'插件等都是通过淡出顶部元素或通过快速闪烁背景来伪造的。即在500毫秒内淡出一个图像，显示半毫秒的背景，然后立即淡入500毫秒以上的新图像。

如果你有两张具有透明度的图像，如果不使用通过背景技术的人造交叉淡入淡出效果，将会非常困难。

使用canvas and requestAnimationFrame可能会得到真正的淡入淡出效果，但这比简单的jQuery淡入/淡出调用要复杂得多。