jQuery - 图像开始时不可见，然后在用户滚动时淡入

Question

我已经非常接近实现我想要的效果了，只是还有一个障碍我不知道如何解决。

基本上，我想从一张图像开始(上面写着“托管的新时代”)，然后，当用户滚动时，该图像会淡出，新的图像会淡入，上面写着“厌倦了与 children 一起托管” ？”

我已经非常接近实现这个效果了。唯一的问题是，当页面加载时，两个图像都是可见的，而当您开始滚动时，第二个图像就会消失。如何使第二张图片在页面加载时不可见？

这是我的 jQuery 代码，这是我从另一个问题中得到的。请注意，我还没有学习 jQuery，所以我编辑它的方式可能是业余的或完全错误的。

$(document).ready(function () {
    var subsection2Top = $('.sub-section2').offset().top;

    $(window).scroll(function () {
        var y = $(window).scrollTop();
        if (subsection2Top + 500 < y) {
            $('.sub-section2').fadeTo(100, 1);
        } else {
            $('.sub-section2').fadeTo(100, 0);
        }
    });
});

$(document).ready(function () {
    var subsectionTop = $('.sub-section').offset().top;

    $(window).scroll(function () {
        var y = $(window).scrollTop();
        if (subsectionTop + 300 < y) {
            $('.sub-section').fadeTo(100, 0);
        } else {
            $('.sub-section').fadeTo(100, 1);
        }
    });
});

另外，这是一个 JSfiddle我所有的代码。

提前谢谢您!

Answer 1

将其添加到就绪函数中。

$('.sub-section2').hide();

我也不明白为什么你有两个现成的函数，你可以像这样写一次。

$(document).ready(function () {
var subsection2Top = $('.sub-section2').offset().top;
var subsectionTop = $('.sub-section').offset().top;
$('.sub-section2').hide();
$(window).scroll(function () {
    var y = $(window).scrollTop();
    if (subsection2Top + 500 < y) {
        $('.sub-section2').fadeTo(100, 1);
    } else {
        $('.sub-section2').fadeTo(100, 0);
    }
    if (subsectionTop + 300 < y) {
        $('.sub-section').fadeTo(100, 0);
    } else {
        $('.sub-section').fadeTo(100, 1);
    }
});
});