Question

我正在尝试在页面上向下滚动时加载内容。我用这种方式调用我的方法：

$(function() {
    fadeBlocksIn();

    $(window).scroll(function() {
        fadeBlocksIn();
        console.log("scrolled");
    });
});

第一个fadeBlocksIn调用似乎是成功的，因为某些元素（在屏幕上可见但没有向下滚动）出现，但是当我向下滚动时，没有任何反应。

功能本身：

function fadeBlocksIn() {
    $('.custom-invisible').each(function (i) {

        var top_of_object = $(this).position().top;
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        bottom_of_window = bottom_of_window - 50;

        if (top_of_object < bottom_of_window) {
            $(this).animate({ 'opacity': '1' }, 500);
        }
    });
}

我在函数调用之后放了console-log来检查方法调用是否成功，因为我在控制台日志中没有得到任何内容，我认为它不成功。

任何想法如何在向下滚动时更改脚本以淡化所有隐藏元素？

Answer 1

这是动画不透明度的正确语法：

$(this).animate({opacity: 1}, 500);

还考虑最初使用css（＆＃34; opacity＆＃34;，0）隐藏你的课程而不是可见性：隐藏。

$（窗口）.scroll不工作

1 个答案: