1

我非常接近实现我想要的效果，我只剩下一个我不知道如何解决的障碍。

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

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

这是我的 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。

先感谢您！

4

4 回答 4

2

快速修复：在第一个 document.ready 调用下方添加此代码：

$(".sub-section2").css('opacity',0);

但我同意你真的应该在你的 css 文件中这样做。jQuery 只是让跨浏览器兼容的 css 变得容易。

于 2013-07-25T14:36:22.637 回答
2

将此添加到就绪功能。

$('.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);
    }
});
});
于 2013-07-25T14:37:08.013 回答
0

对于第二个图像使用：

   <img src="http://i.imgur.com/HHxgCJH.png" style="display: none;"/>
于 2013-07-25T14:33:25.267 回答
0

演示： jsFiddle

改变：

<section id="section-two" class="sub-section2" style="display: none;">

HTML：

<body>
    <section id="section-one" class="sub-section">
        <article class="text-image">
            <img src="http://i.imgur.com/c11oOSv.png" />
        </article>
    </section>
    <section id="section-two" class="sub-section2" style="display: none;">
        <article class="text-image">
            <img src="http://i.imgur.com/HHxgCJH.png" />
        </article>
    </section>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
</body>

JS：

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

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

    $(window).scroll(function () {
        var y = $(window).scrollTop();
        if (subsectionTop + 300 < y) {
            $('.sub-section').fadeTo(100, 0);
        } else {
            $('.sub-section').fadeTo(100, 1);
        }
    });
});
于 2013-07-25T14:36:07.670 回答