Javascript 当页面准备就绪时，如何使用jquery将所有元素隐藏在可见视口（屏幕）中的元素旁边，并在滚动中显示它们

我试图做的是在页面加载/准备就绪时使用jquery将所有元素隐藏在可见视口（屏幕）中的元素旁边

然后，当用户开始向下滚动并且元素位于可见视口（用户屏幕）中时。元素将以淡入淡出效果出现

所以我尝试了一些代码组合，但没有一个是100%有效的。需要帮助才能顺利完成这项工作

这是我在网上找到的第一个代码。在主页（头版）上似乎很有用，但当我转到第二页时，它就不起作用了。这段代码会产生一些bug（减慢网站速度）

第二个代码在特定元素上运行良好。如果我改变所有具体的元素，只放“body*”，会把网站弄得一团糟

第二个问题是滚动。 如果某个div或部分有长内容，它会在这个div的末尾将不透明度改回1，但这是错误的！当div顶部在视口（用户屏幕）中可见时，需要将不透明度更改回原来的值

这是第一个代码

$(document).ready(function() {

    /* Hide all elements outside the visible window */
    $('body *').each( function(){

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

        if( bottom_of_window < top_of_object  ){

            $(this).addClass('hideme').css({'opacity':'0'});

        }

    });

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

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

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


                if( bottom_of_window > ( bottom_of_object + 20 )  ){

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

                }

        }); 

    });

});

$（文档）.ready（函数（）{
/*隐藏可见窗口外的所有图元*/
$（'body*'）。每个（函数（）{
var top\u of_object=$（this）.position（）.top；
var bottom_of_window=$（window.scrollTop（）+$（window.height（））；
if（_窗口的底部_<_对象的顶部_）{
$（this.addClass（'hideme'）.css（{'opacity'：'0'}）；
}
});
/*每次滚动窗口时*/
$（窗口）。滚动（函数（）{
/*检查所需元素的位置*/
$（'.hideme'）。每个（函数（i）{
变量bottom\u of_object=$（this.position（）.top+$（this.outerHeight（））；
var bottom_of_window=$（window.scrollTop（）+$（window.height（））；
if（窗口的底部>（对象的底部+20））{
$（this.removeClass（'hideme'）.animate（{'opacity'：'1'}，500）；
}
}); 
});
});

这是第二个代码：

$(document).ready(function(){
tiles = $("#sidebar1 .widget , article section").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

$（文档）.ready（函数（）{
tiles=$（“#sidebar1.widget，article section”）.fadeTo（0,0）；
});
$（窗口）。滚动（功能（d，h）{
瓷砖。每个（功能（i）{
a=$（this.offset（）.top+$（this.height（））；
b=$（窗口）.scrollTop（）+$（窗口）.height（）；
如果（a

您可以扩展sizzle以使用自己的表达式：

jQuery.extend(jQuery.expr[':'], {
    inview: function (el) {
        var $e = $(el),
            $w = $(window),
            top = $e.offset().top,
            height = $e.outerHeight(true),
            windowTop = $w.scrollTop(),
            windowScroll = windowTop - height,
            windowHeight = windowTop + height + $w.height();
        return (top > windowScroll && top < windowHeight);
    }
});

---

PS：我没有测试代码段…

即使将不透明度设置为零，对象仍会占用空间。如果您设置了

$（this.addClass（'hideme'）.css（{'display'：'none'}）则浏览器不会呈现该对象，也不会影响页面的布局。如果元素
这个
从未被创建过，页面将看起来与它相同。
Hello@AWolff，它有帮助！但在用户可以看到动画之前，它似乎会变回“不透明度1”。@AWolff，谢谢您的帮助！但在我更改为更新的代码后，会有很长的延迟。。。
$(window).scroll(function(){
     $('.hideme:inview').animate({opacity:1},500,function(){$(this).removeClass('hideme');});
});