Javascript 在保留空间的同时衰减div

我的HTML中有三个div，分别是“blockOne”、“blockTwo”和“blockThree”

我希望它们开始时对用户不可见，然后随着用户向下滚动页面而淡入。目前，我已经将它们的不透明度设置为0（在CSS中）：

然后，我对以下脚本有了一个简单的描述：-

    $(document).scroll(function(){
var docScroll = $(document).scrollTop(),
    threeBoxesOffset = $(".content").offset().top - 25;

if (docScroll >= threeBoxesOffset) {

    $(".blockOne").fadeTo(1000, 1)
    $(".blockTwo").fadeTo(1500, 1)
    $(".blockThree").fadeTo(2000, 1)

} else {

    $(".blockOne").fadeTo(500, 0)
    $(".blockTwo").fadeTo(1000, 0)
    $(".blockThree").fadeTo(1500, 0)

}
});

结果是div在开始时对用户不可见，这是正确的，但是当用户向下滚动到开始可见时，div不会立即开始淡入，而是需要一些时间才能淡入

我猜，当用户向下滚动时，动画不知怎的在排队，并且不确定如何修复此问题。

尝试以下操作：

if ( docScroll >= threeBoxesOffset ) {
    $('.blockOne').fadeIn(1000, function() {
        $('.blockTwo').fadeIn(500, function() {
            $('.blockThree').fadeIn(500);
        });
    });
} else {
    $('.blockOne').fadeOut(500, function() {
        $('.blockTwo').fadeOut(500, function() {
            $('.blockThree').fadeOut(500);
        });
    });
}

PS-在代码末尾，您有一个无与伦比的集合闭合器：

}
})    // <-- not matched with anything above
});

}
})//
threeBoxesOffset
始终包含负值，因为
$（“.content”）.offset（）.top-25
。因此，在您的脚本中，如果（docScroll>=threeBoxesOffset）

条件始终为真，并立即在滚动上显示内容。我现在为其制定了一个解决方案：

（更新）/手表 JQuery

$(document).ready(function() {
    var threeBoxesOffset = $(".content").offset().top - 40;
    $(window).scroll(function(event){
        var docScroll = $(document).scrollTop();
        var check=docScroll+threeBoxesOffset;           
        $('#fxd').html('check : '+check);
        if (check>0) {
            $(".blockOne").stop().animate({'opacity':'1'},500);
            $(".blockTwo").stop().animate({'opacity':'1'},1500);
            $(".blockThree").stop().animate({'opacity':'1'},2000);
        } else {
            $(".blockOne").stop().animate({'opacity':'0'},500);
            $(".blockTwo").stop().animate({'opacity':'0'},1000);
            $(".blockThree").stop().animate({'opacity':'0'},1500);
        }
    });
});

---

为什么要用jquery设置不透明度。只需对初始样式使用CSS。请改为使用CSS，谢谢！你能做一把小提琴吗？再检查一下我的答案，根据你的编辑进行调整。主持人：哎呀，我确实有这个，但我把代码段复制错了。谢谢，编辑！仍然不起作用：（删除了不匹配的集合关闭器，它们是用于我意外复制的文档准备功能。就是这样。非常感谢！：D

$(document).ready(function() {
    var threeBoxesOffset = $(".content").offset().top - 40;
    $(window).scroll(function(event){
        var docScroll = $(document).scrollTop();
        var check=docScroll+threeBoxesOffset;           
        $('#fxd').html('check : '+check);
        if (check>0) {
            $(".blockOne").stop().animate({'opacity':'1'},500);
            $(".blockTwo").stop().animate({'opacity':'1'},1500);
            $(".blockThree").stop().animate({'opacity':'1'},2000);
        } else {
            $(".blockOne").stop().animate({'opacity':'0'},500);
            $(".blockTwo").stop().animate({'opacity':'0'},1000);
            $(".blockThree").stop().animate({'opacity':'0'},1500);
        }
    });
});