图像淡入/淡出(images fade in/out)

图像淡入/淡出(images fade in/out)

我有2个图像类的菜单（img.b和img.a）叠加，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; }

I have this 2 images classes for a menu (img.b and img.a) superimposing, img.b lay above by default and with 0 transparency, and i need to make img.a fade out while the other fade in.. like the code i have, img.a remain under the one that fade in (the 2 classes have transparency so you can see them one over the other).. tried several solutions but i ended up affecting all the buttons together.

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

最满意答案

这与前一个问题类似。 你要做的是被称为交叉褪色。 这篇文章解释得很好。

您可能还对使用CSS交叉淡入淡出感兴趣。

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

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

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

This is similar to this previous question. What you are trying to do is called cross fading. This article explains it quite well.

You may also be interested in crossfading with CSS.

The real issue is that it is difficult to actually do a true cross fade in JavaScript due to it's single thread. All the 'cross fade' plugins etc. fake it by either only fading out the top element or by flashing through the background real fast. i.e fadeOut one image in 500ms showing the background for a half millisecond then immediately fadeIn the new image over 500ms.

If you have two images with transparency, doing a nice cross fade is going to be very difficult without using the faux-cross-fade-via-the-background technique.

It may be possible to get a true cross fade using some canvas and requestAnimationFrame but that's getting far more complicated than a simple jQuery fadeIn/fadeOut call.