0

我有一个菜单（img.b和img.a）叠加的这2个图像类，img.b默认位于上方并且透明度为0，我需要让img.a淡出而另一个淡入......就像我拥有的代码，img.a 保留在淡入的代码下（这两个类具有透明度，因此您可以看到它们一个接一个）.. 尝试了几种解决方案，但我最终影响了所有按钮。

<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;
    }
4

1 回答 1

0

这与上一个问题类似。您正在尝试做的事情称为交叉淡入淡出。 这篇文章很好地解释了它。

您可能还对使用 CSS 进行淡入淡出感兴趣。

真正的问题是，由于它是单线程的，因此很难在 JavaScript 中真正进行真正的交叉淡入淡出。所有的“交叉淡入淡出”插件等都通过仅淡出顶部元素或快速闪过背景来伪造它。即在 500 毫秒内淡出一张图像，显示背景半毫秒，然后在 500 毫秒内立即淡出新图像。

如果你有两张透明的图像，如果不使用 faux-cross-fade-via-the-background 技术，做一个漂亮的交叉淡入淡出将是非常困难的。

使用一些画布和 requestAnimationFrame可能会获得真正的交叉淡入淡出，但这比简单的 jQuery fadeIn/fadeOut 调用要复杂得多。

于 2013-03-19T23:04:49.807 回答