0

私は自分の Web サイトでイベントのタイムラインを作成しています。タイムラインを下にスクロールすると、各要素 (クラス '.event') がフェードインするようにしようとしています。問題が発生しています。個別ではなく、すべて同時にフェード インします。

理由はありますか？前もって感謝します！

$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.event').each( function(i){

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

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

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

        }

    }); 

});

});

4

1 に答える 1

1

あなたのJSFiddleに基づいて、これはスタイリングやマークアップの問題に関連しているようです。

コードとマークアップで動作する JSFiddle の更新バージョンは次のとおりです: http://jsfiddle.net/2yMn4/2/。レイアウトが少し混乱するため、構造を再考する必要があるかもしれませんが、うまくいけば、正しい方向に向けることができます. それが機能し始めた主な変更点は、.eventクラスを相対的に配置するように切り替えたことです。.posts-timeline次に、2 番目の記事と.postsdivを削除します。

.event {
    position: relative;
    opacity: 0;
    left: 50%;
    width: 210px;
    z-index: 100;
    min-height: 100px;
}
于 2013-05-04T15:02:46.360 に答える