使用 Jquery 在滚动时淡入元素答案

【问题标题】：Fade elements in on scroll with Jquery使用 Jquery 在滚动时淡入元素
【发布时间】：2013-04-28 19:28:31
【问题描述】：

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

        }

    }); 

});

});

【问题讨论】：

你能用你的标记、样式和代码创建一个 JSFiddle 或其他东西吗？我将您的 JS 放入我刚刚创建的 JSFiddle 中，它工作正常：jsfiddle.net/drn33。我们需要查看您的情况有何不同，以了解为什么它不起作用。
是的，这里有一个链接jsfiddle.net/edharrison89/V5DU7

标签： javascript jquery scroll opacity

【解决方案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;
}

【讨论】：