CSS3 & jQuery animate on scroll position

Question

having a few issues with my code here. I want brackets to animate whenever they are visible on the screen on the users scroll. My issue is that all of the h2 elements on the page animate at the same time instead when they show in screen. Below is the jQuery used, and here is a link to a jsfiddle:

http://jsfiddle.net/CbxvH/18/

Thanks in advance, Mike.

    $(window).scroll( function(){

        var test1 = $('article h2 span.bracket1');
        var bottom_of_object1 = $(test1).position().top + $(test1).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window > bottom_of_object1 ){

            $(test1).addClass( "slideLeft" );
            setTimeout(function() {
              $("article h2 .spanContent").animate({'opacity':'1'},1000);
            }, 1000);


    };

        var test2 = $('article h2 span.bracket2');

        var bottom_of_object2 = $(test2).position().top + $(test2).outerHeight();

        if( bottom_of_window > bottom_of_object2 ){

            $(test2).addClass( "slideRight" );

        };

        var test3 = $('article h2 span.bracket3');

        var bottom_of_object3 = $(test3).position().top + $(test3).outerHeight();

        if( bottom_of_window > bottom_of_object3 ){

            $(test3).addClass( "slideLeft" );
            setTimeout(function() {
              $("article h2 .spanContent2").animate({'opacity':'1'},1000);
            }, 1000);

        }

        var test4 = $('article h2 span.bracket4');

        var bottom_of_object4 = $(test4).position().top + $(test4).outerHeight();

        if( bottom_of_window > bottom_of_object4 ){

            $(test4).addClass( "slideRight" );

        }


});

each statement:

$('.featureImages img, article p, article ul li').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},1000);

        }

    });

Mina · Accepted Answer · 2013-09-13 13:38:08Z

1

Have you tried using offset() instead of position()?

var offset =  $(test1).offset();  
var bottom_of_object1 = offset.top + $(test1).outerHeight();

answered Sep 13, 2013 at 13:38

Mina

1,5161 gold badge10 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Bole Over a year ago

That seems to have worked. What I don't understand is why position() works for the 'each' statement I put further up the document and not for this. Perhaps you could shed some light on it? I've edited the code to include the each statement.

Mina Over a year ago

I think it has to do with the position: absolute you have assigned to your elements. position() gets the coordinated relative to the parent element, offset() gets them from the document.

Collectives™ on Stack Overflow

CSS3 & jQuery animate on scroll position

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related