0

この効果を再現しようとしています http://www.officialwaynerooney.com/social

私はこれまでのところこれを持っています

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

しかし、明らかにすべてのリスト項目をアニメーション化します。一度に 1 つのリスト アイテムをターゲットにするのが最善の方法です。どうするのが一番いいのかさっぱり思いつきません。

ありがとう、

マット

4

2 に答える 2

1

それぞれをループし、それぞれliに個別のアニメーション呼び出しを適用します。

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

$(this)ループ内で、 or i(リスト内の要素のインデックス)のプロパティに基づいてアニメーションを設定します$(this).delay(i * 50).animate(/* other properties */)。

于 2013-03-05T16:27:57.427 に答える
0

最初のアニメーションの場合:

$('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そうでない場合は、それらすべてに初期クラスを持たせてそれをチェックし、アニメーション化するときにそれを削除できます。または何か、アニメーション化されているかどうかを確認する方法はたくさんあります。

于 2013-03-05T16:39:58.700 に答える