Jquery 在视口中时按顺序淡入div

我正在努力使一组

div

在屏幕上出现时按顺序淡入。然而，我仍然有一些困难，让它工作

我有大约5个

div

类

hideme

，我想在它们出现后慢慢淡入

这些

div

的HTML非常简单：

<div class="hideme">
    <h3 class="text-white">one</h3>
    <img src="../link-to-image.jpg">
    <p>Some text that goes here!</p>
</div>

一
这里有一些文字

到目前为止，我把它作为我的jQuery，但我不确定它哪里出了问题，我认为其中可能有一些语法错误

var divs = $('.hideme');

$(window).on('scroll', function() {

    $.each(divs, function(i, item) {

        if($(item).offset().top <= $(window).scrollTop();) {
            setTimeout(function() {
            $(item).css('opacity', '1');
        }, 1000 * i);
        }

    });

});

var divs=$（'.hideme'）；
$（窗口）.on（'scroll'，function（）{
$。每个（分区、功能（i、项目）{
if（$（item）.offset（）.top您的javascript控制台在查找语法错误时非常有用，因为它通常会告诉您语法错误的确切位置

特别是，这一行：

if($(item).offset().top <= $(window).scrollTop();) {


这里要了解的另一件事是，
窗口。在向下滚动页面的过程中，滚动
会触发很多次。最终会出现一大堆
设置超时
的堆叠，这不是一种理想的方法。
你能提供一个JSFIDLE吗？这会有帮助：]好家伙！他们都出现了很好，现在我有一个问题：当DIV点击页面顶部时，不透明度改变发生，而不是在全视图中消失。有什么想法吗？你只需要修改你的逻辑来检查何时显示它们。g
fadeIn
以获得实际的淡入淡出效果，而不是即时出现。然后您也可以同时放弃
setTimeout
。
if($(item).offset().top <= $(window).scrollTop()) {