Question

我有2个图像类用于菜单（img.b和img.a）叠加，img.b默认位于上方且0透明度，我需要使img.a淡出而其他淡入..就像我有的代码一样，img.a仍然在淡入的那个（2个类有透明度，所以你可以看到它们一个）...尝试了几个解决方案，但我最终影响了所有按钮。< / p>

<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的真正交叉淡入淡出。所有“交叉淡入淡出”插件等都可以通过淡出顶部元素或通过快速闪烁背景来伪造它。即fadeOut一个图像在500ms显示背景半毫秒然后立即淡化新图像超过500ms。

如果你有两张具有透明度的图像，那么在不使用人工交叉淡入淡出背景技术的情况下，做一个漂亮的交叉淡入淡出会非常困难。

有可能使用一些canvas and requestAnimationFrame获得真正的交叉渐变，但这比简单的jQuery fadeIn / fadeOut调用要复杂得多。

图像淡入/淡出

1 个答案: