Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Question .animation() Fadein / Fadeout issue

    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.


    Code:
    //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!
    Last edited by dylanbaumannn; 05-08-2012 at 07:47 PM. Reason: Extra Code deleted

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Your code will result in a syntax error

    Where does this line of code come from?
    Code:
    marginLeft:0},800);

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by devnull69 View Post
    Your code will result in a syntax error

    Where does this line of code come from?
    Code:
    marginLeft:0},800);
    sorry about that, I have removed it. It was irrelevant

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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
    Code:
    //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;
    		}


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •