javascript - 使用 Jquery 在滚动时淡入元素

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文章和.postsdiv。

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