Question

所以我使用jquery UI库中的另一个问题使用此代码

$(window).scroll(function() {
    $("#about").stop().animate({
       backgroundColor: $(window).scrollTop() > 200 ? '#000' : '#fff',
    }, 1000);
});

所需的所有css都是

#about {background-color:#fff;}

这完美，但我想尝试完全相同的效果，只是在另一个div上使用不同的颜色。

所以我尝试复制和粘贴，并更改设置但由于某种原因#contact会在页面加载时淡入，而不是当用户滚动到该点时。

我的html只有100％的宽度和高度叠加在彼此的顶部。

谢谢你！

* JS FIDDLE *

http://jsfiddle.net/xZyzv/

Answer 1

在脚本中包含JQuery文件，它将起作用。在您的JSFIDDLE中，只需将框架和扩展（左侧）从“No Library（Pure js）”更改为“Jquery 1.6.4”并运行小提琴。

请参阅我的评论，了解为什么只有在快速滚动时才能看到褪色效果。

当您到达#contact div时，您可以使用此javascript查看淡化效果。

 $(window).scroll(function() {
        $("#about").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#000' : '#fff',
        }, 1000);
    if($(window).scrollTop() > 500){
    $("#contact").stop().animate({
          backgroundColor: $(window).scrollTop() > 500 ? '#fff' : '#000',
        }, 1000);
    }

    });

Answer 2

我向其他div添加了相同的功能。也许卷轴中的值200应该被调整，这样只有当你靠近那个div时它才会消失。

Fiddle here

$(window).scroll(function() {
        $("#home").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#00f' : '#fff',
        }, 1000);
    });
$(window).scroll(function() {
        $("#about").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#0f0' : '#fff',
        }, 1000);
    });

$(window).scroll(function() {
        $("#contact").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#0ff' : '#f00',
        }, 1000);
    });

滚动时jquery动画背景颜色（多个div）

2 个答案: