Here you can see the problem as JSFiddle
I have set 5 different scroll points, on each there is a different image fading in and 5 others out just like this:
$("#active1").finish().fadeIn(2000);
$("#active2").finish().fadeOut(2000);
$("#active3").finish().fadeOut(2000);
$("#active4").finish().fadeOut(2000);
$("#active5").finish().fadeOut(2000);
I have Navigation points which jump me to one of the five scroll points and the Animation works properly, fading, just how It's supposed to be.
However when I scroll to another point, inbetween two scrollpoints, another image flashes up.
I would like the Images to just normally fade, just like with the navigation points when I'm scrolling.
Not perfect but I've replaced .finish() with .stop(true,false) to clear the animation queues without completing the animation, this should help reduce the image opacity jumps. the fading in this version though is imperfect if the user scrolls too fast.
The image constructors have been moved outside the .bind() call to avoid reconstructing on every scroll event, and the .bind() call itself has been replaced by .on() as recommended by jQuery.
Your multiple fade calls have been placed into a single function called activeFade() which is a simple for-loop to cycle through and fade out each id with the exception of the number passed into the argument. This is to help debugging make it a little more DRY, also makes it quicker to experiment with different fade times and stop parameters.
$(function() {
var Impressum = new Image();
Impressum.src = 'BaumImpressum.jpg';
var Beratung = new Image();
Beratung.src = 'BaumBeratung.jpg';
var Therapie = new Image();
Therapie.src = 'BaumTherapie.jpg';
var Profil = new Image();
Profil.src = 'BaumProfil.jpg';
for (var i, i = 1; i < 6; i++) {
var active = "#active" + i + ',#active_logo' + i; // describe the selectors
$(active).fadeIn(1000);
} // fade everything in to start
function activeFade(n) {
for (var i, i = 1; i < 6; i++) {
var active = "#active" + i + ',#active_logo' + i; // describe the selectors
var action = $(active).stop(true, false);
if (i === n) {
action.fadeIn(2000);
} else {
action.fadeOut(2000);
} // stop true false -clears the animation queue without completing the animation
}
} // cycle through all five id's and fade out - except for the chosen one
$('#content_area').on("scroll.alert", function() {
var $this = $(this);
//Leben
if ($this.scrollTop() >= 0) {
$('h1').css('color', '#694d6d');
$('h2').css('color', '#694d6d');
$('h3').css('color', '#694d6d');
$("#Text1scroll").css('color', '#ffffff');
$("#Text2scroll").css('color', '#694D6D');
$("#Text3scroll").css('color', '#694D6D');
$("#Text4scroll").css('color', '#694D6D');
activeFade(1);
$('.top').css('background-color', '#F9AE00');
$('.footer1').css('background-color', '#694D6D');
}
//Beratung
if ($this.scrollTop() >= 600) {
$('h1').css('color', '#4c6f21');
$('h2').css('color', '#4c6f21');
$('h3').css('color', '#4c6f21');
$("#Text1scroll").css('color', '#4C6F21');
$("#Text2scroll").css('color', '#ffffff');
$("#Text3scroll").css('color', '#4C6F21');
$("#Text4scroll").css('color', '#4C6F21');
//$('.rightA').css('background-image', 'url(BaumBeratung.jpg)');
activeFade(2);
$('.top').css('background-color', '#fec542');
$('.footer1').css('background-color', '#88a450');
}
//Therapie
if ($this.scrollTop() >= 1300) {
$('h1').css('color', '#c5471d');
$('h2').css('color', '#c5471d');
$('h3').css('color', '#c5471d');
$("#Text1scroll").css('color', '#c5471d');
$("#Text2scroll").css('color', '#c5471d');
$("#Text3scroll").css('color', '#ffffff');
$("#Text4scroll").css('color', '#c5471d');
activeFade(3);
$('.top').css('background-color', '#c8cce9');
$('.footer1').css('background-color', '#ee7033');
}
//Profil
if ($this.scrollTop() >= 2000) {
$('h1').css('color', '#9a4d75');
$('h2').css('color', '#9a4d75');
$('h3').css('color', '#9a4d75');
$("#Text1scroll").css('color', '#9a4d75');
$("#Text2scroll").css('color', '#9a4d75');
$("#Text3scroll").css('color', '#9a4d75');
$("#Text4scroll").css('color', '#ffffff');
activeFade(4);
$('.top').css('background-color', '#C0D360');
$('.footer1').css('background-color', '#DE6CA8');
}
//Impressum
if ($this.scrollTop() >= 2500) {
$('h1').css('color', '#694d6d');
$('h2').css('color', '#694d6d');
$('h3').css('color', '#694d6d');
$('h4').css('color', '#694d6d');
$("#Text4scroll").css('color', '#694d6d');
activeFade(5);
$('.top').css('background-color', '#F9AE00');
$('.footer1').css('background-color', '#694D6D');
}
});
});