CODEWITHSUNDEEP
jquerylistanimation
user2136584
user2136584

Reputation: 13

How to animate a list one li at a time with JQuery

I'm trying to replicate this effect http://www.officialwaynerooney.com/social

I've got this so far

    $(document).ready(function(){
        $(window).scroll(function(){
            var scrollTop = 100;
            if($(window).scrollTop() >= scrollTop){
                $('li').animate();  
                //Animation
            }
        })
    })

But obviously it animates all list items. How is it best to target one list item at a time. I just can't think of what the best way to do it is.

Thanks,

Matt

Upvotes: 0

Views: 2144

Answers (2)

Belladonna
Belladonna

Reputation: 3862

For the initial animations:

$('li').each(function(i) {
    if($(this).offset().top < $(window).height()){
        $(this).delay(i * 50).animate();
    }
});

And this for the ones beyond the initial window:

var oldTop = 0;

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > oldTop ){
         $('li:hidden').each(function(i) {
             if($(this).offset().top < $(window).height() + scrollTop){
                  $(this).delay(i * 50).animate();
             }
       });
       oldTop = scrollTop;
    }
})

Note: I'm using the :hidden psuedo-selector assuming the li's are hidden initially. if they're not, you can have them all have an initial class and check for that, and remove it when animating. Or something, there's lots of ways you can check if it's been animated.

Upvotes: 0

freejosh
freejosh

Reputation: 11383

Loop through each li and apply a separate animation call to each.

$('li').each(function(i) {
    $(this).animate();
});

Inside the loop set up your animation based on the properties of $(this) or i (index of element in list), e.g. $(this).delay(i * 50).animate(/* other properties */).

Upvotes: 1

Related Questions