Question

我正在我的网站上创建一个事件的时间轴，并且当我向下滚动时间轴时，我试图让每个元素（带有一个类'.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);

        }

    }); 

});

}）;

Answer 1

根据您的JSFiddle，这似乎与样式和/或标记问题有关。

以下是适用于您的代码和标记的JSFiddle的更新版本：http://jsfiddle.net/2yMn4/2/。它会稍微弄乱您的布局，因此您可能需要重新考虑结构，但希望这会指向您正确的方向。让它开始工作的主要变化是将.event类切换为相对定位。然后删除第二篇.posts-timeline文章和.posts div。

.event {
    position: relaive;
    opacity: 0;
    left: 50%;
    width: 210px;
    z-index: 100;
    min-height: 100px;
}

使用Jquery淡化滚动元素

1 个答案: