Question

我正在努力让一组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);
        }

    });

});

Answer 1

您的javascript控制台在查找语法错误时非常有用，因为它通常会告诉您它们的确切位置。

特别是，这一行：

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

if：

中不应有分号

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

http://jsfiddle.net/hhzJG/

这里要意识到的另一件事是window.scroll在向下滚动页面的过程中会多次触发。你将最终得到一大堆setTimeout堆叠，这不是一个理想的方法。

在视口中顺序淡入div

1 个答案: