滚动多个图像淡出 [英] Multiple Image Fadeout on scroll

问题描述

我有一页，在每个导航点上，网站中间的图像都会随着褪色而变色.

I have a onepage and on each navigation point a image in the middle of the site changes color by fading.

我设法淡入:$(#active3").fadeIn(2000); 但是我有一个问题再次淡出. 让我尝试解释一下: 我有5个导航点，其中包含5张不同的图片. 如果我(例如)从第一导航点滚动到第三导航点，那么我将有3张图片相互叠放，因为在每个导航点上，一张图片都会淡入.

I managed to fade in with: $("#active3").fadeIn(2000); However I have a issue fading it out again. Let me try to explain: I have 5 Navigation points with 5 different images. If I (for example) scroll from first to third navigation point im gonna have 3 pictures laying over each other since on every navigation point, one picture fades in.

如果我再从第三跳到第一张，则必须以某种方式将第一张图片放在最上面(因为z-index不能褪色或?对我来说不起作用)，或者我淡出2和3.

If I then jump from third again to the first I have to get the first picture on top somehow ( which wouldn't work for me since z-index can not fade, or? ) or I fade 2 and 3 out.

因此，我尝试淡出不在活动导航上的每个图像.例如，当我在第二个导航点时，代码将是:

So I tryed to fade out each image which is not on the active navigation point out. For example when I was on the second navigaton point the code would be:

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

但是，似乎FadeOuts排队并不会同时发生.

But It seems that the fadeOuts queue and don't happen at the same time.

这是我正在工作的网站: http://palmira-lopez.de

This is the site im working on: http://palmira-lopez.de

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

thank you for helping! Also as a sitenote, this is not a commercial project but a site for my mum :)

推荐答案

但是似乎淡出队列

But It seems that the fadeOuts queue

您可以使用 .finish()告诉jquery完成当前排队的事情.

You can use .finish() to tell jquery to finish whatever is currently queued.

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

这可能不是您想要的，对于那些不在此过程中的用户，可能需要.hide().

this may not be what you want though and you may want .hide() for those that are not in the process.

您最好添加一个类并使用CSS过渡.

You might be better adding a class and using css transitions.

这篇关于滚动多个图像淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！