使用 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文章和.posts div。

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