滚动上的多个图像淡出

Question

我有一个单页，在每个导航点上，网站中间的图像通过褪色改变颜色。

我设法淡入：$("#active3").fadeIn(2000); 但是我有一个问题再次淡出。让我试着解释一下：我有 5 个导航点和 5 个不同的图像。如果我（例如）从第一个导航点滚动到第三个导航点，我将有 3 张图片相互重叠，因为在每个导航点上，一张图片淡入。

如果我再次从第三张跳到第一张，我必须以某种方式将第一张图片放在最上面（这对我不起作用，因为 z-index 不能淡出，或者？）或者我淡出 2 和 3出。

所以我试着淡出每张不在活动导航点上的图像。例如，当我在第二个导航点时，代码将是：

$("#active1").fadeOut(2000);
$("#active2").fadeIn(2000);
$("#active3").fadeOut(2000);
$("#active4").fadeOut(2000);
$("#active5").fadeOut(2000);

但是 fadeOuts 队列似乎并没有同时发生。

这是我正在处理的站点：http://palmira-lopez.de

感谢您的帮助！另外作为站点说明，这不是商业项目，而是我妈妈的站点:)

Answer 1

But It seems that the fadeOuts queue

您可以使用 .finish() 告诉 jquery 完成当前排队的任何内容。

$("#active1").finish().fadeOut(2000);
$("#active2").finish().fadeIn(2000);
$("#active3").finish().fadeOut(2000);
$("#active4").finish().fadeOut(2000);
$("#active5").finish().fadeOut(2000);

这可能不是您想要的，您可能想要 .hide() 那些不在流程中的人。

您最好添加 class 并使用 css 转换。

滚动上的多个图像淡出

Multiple Image Fadeout on scroll

jquery

html

css

scroll

fade