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

时间：2013-07-25 14:29:14

标签： jquery

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

基本上，我想从一个图像（即“托管的新时代”）开始，然后，当用户滚动时，图像淡出，一个新的图像淡入，说“厌倦了与孩子们托管？“

我非常接近达到这个效果。唯一的问题是，当页面加载时，两个图像都是可见的，第二个图像随后开始滚动时消失。如何在页面加载时使第二个图像不可见？

这是我的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 个答案:

答案 0 :(得分：2)

快速修复： 在第一个document.ready call下面添加此代码：

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

但我同意你应该在你的css文件中真正做到这一点。 jQuery只是简化了跨浏览器兼容的css。

答案 1 :(得分：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);
    }
});
});

答案 2 :(得分：0)

对于第二张图片使用：

   <img src="http://i.imgur.com/HHxgCJH.png" style="display: none;"/>

答案 3 :(得分：0)

DEMO： 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);
        }
    });
});
相关问题
最新问题