向下滚动时背景图像不透明度为 50%

【问题标题】：Background image 50% opacity when scrolling down向下滚动时背景图像不透明度为 50%
【发布时间】：2014-04-05 15:01:28
【问题描述】：

我正在使用 Backstretch jQuery 插件，并且希望在向下滚动时使背景变暗。

这是我到目前为止所做的。车身底色-深色向下滚动 800 像素时背景图像的不透明度为 0.4。

我剩下的就是让淡入淡出效果变慢。现在它从不透明度 1 到 0.4 的速度非常快。

这是我的代码

$(window).scroll(function() {
    if ($(window).scrollTop() > 800) {
        $('.backstretch').css("opacity", 0.4).fadeIn("slow");;
    }
    else{
        $('.backstretch').css("opacity", 1).fadeIn("slow") ;
    }
});

谁能帮我慢慢淡化它？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

尝试将您的代码替换为

    $(window).scroll(function() {
    if ($(window).scrollTop() > 800) {
        $('.backstretch').css("opacity", 0.4).fadeIn("5000");;
    }
    else{
        $('.backstretch').css("opacity", 1).fadeIn("5000") ;
    }
});

其中“5000”表示动画的时间，以毫秒为单位。

【讨论】：

嘿，谢谢@angelo 的帮助！最后我确实更改了一些代码，现在看起来像这样 $(document).scroll(function () { if ($(this).scrollTop() > 1 && $(this).scrollTop() > 500 ) { $(".backstretch").animate({opacity: 0.2}, "1000"); return; } $(".backstretch").animate({opacity: 1}, "1000").stop( true , 真); });
是的。再次感谢。