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并对每个{.p>应用单独的动画调用。

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

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

Answer 2

对于初始动画：

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

这对于超出初始窗口的那些：

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;
    }
})

注意：我正在使用:hidden伪造选择器，假设li最初是隐藏的。如果他们不是，你可以让他们都有一个初级课程并检查它，并在动画时删除它。或者其他什么，有很多方法可以检查它是否已被动画化。

如何使用JQuery一次动画一个列表

2 个答案: