.animation() Fadein / Fadeout issue

[dylanbaumannn]

Hello!

I'm currently working on a site that has a detector that figures out how far you've scrolled (let's say 300px from the top) and then it applies a .animation() to a div.

The current issue is that it properly detects when you scroll down past the trigger and will play the animation, however when you scroll back UP past the trigger, it won't fade the div back out.

//VARABLES
	var top = $(document).scrollTop();
	var section5headline = $("#section5headline").offset(); // (trigger)


//section5 animation
		if (section5headline.top < (top+300) ) {
			$('#section5spot2').animate({opacity:1},2500);
		}

//section5 Reverse animation
		if (section5headline.top > (top+300) ) {
			$('#section5spot2').animate({opacity:0},2500);
		}

the current code causes the div to have a default opacity of 0 since it starts off above the trigger. Once scrolled below it it will NOT apply the opacity:1 animation.

Am I missing something?

Thanks ahead of time!

[devnull69]

Your code will result in a syntax error

Where does this line of code come from?

marginLeft:0},800);

[dylanbaumannn]

Originally Posted by devnull69

Your code will result in a syntax error

Where does this line of code come from?

marginLeft:0},800);

sorry about that, I have removed it. It was irrelevant

[devnull69]

I suppose you put your code into a .scroll() handler? This will result in a lot(!) of queued animations while you are scrolling, because at a certain point one condition will be true with every tiny move of the scrollbar. So you create tons and tons of queued animations ...

Try to include a boolean that stores the current status

//VARABLES
	var visible = false;

	var top = $(document).scrollTop();
	var section5headline = $("#section5headline").offset(); // (trigger)


//section5 animation
		if (section5headline.top < (top+300) && !visible) {
			$('#section5spot2').animate({opacity:1},2500);
                        visible = true;
		}

//section5 Reverse animation
		if (section5headline.top > (top+300) && visible) {
			$('#section5spot2').animate({opacity:0},2500);
                        visible = false;
		}