Search code examples
jqueryhtmlcssscrollfade

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.

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.

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

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

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 :)

Solution

  • But It seems that the fadeOuts queue

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

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

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