jquery - 如何使用 JQuery 一次为一个列表设置动画

Question

我正在尝试复制这种效果http://www.officialwaynerooney.com/social

到目前为止我有这个

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

但显然它会为所有列表项设置动画。如何最好一次定位一个列表项。我只是想不出最好的方法是什么。

谢谢，

马特

Answer 1

循环遍历每个li并对每个应用单独的动画调用。

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

$(this)在循环内部根据或i（列表中元素的索引）的属性设置动画，例如$(this).delay(i * 50).animate(/* other properties */).

Answer 2

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.