Question

我试图在不同的scrolltop值上多次为div的背景颜色设置动画。下面是我的代码，但它只改变一次颜色（它只监听第二个。）有人可以帮忙吗？

$(window).scroll(function() {
         if($(window).scrollTop() >=200){
             $('#div01').stop().animate({ backgroundColor: "#fff" },500);
         }
         else{
             $('#div01').stop().animate({ backgroundColor: "#333" },500); 
         }
});
 $(window).scroll(function() {
         if($(window).scrollTop() >=500){
             $('#div01').stop().animate({ backgroundColor: "#777" },500);
         }
         else{
             $('#div01').stop().animate({ backgroundColor: "#fff" },500); 
         }
});

Answer 1

为您的第一个if提供另一个条件，以检查$(window).scrollTop()是否小于500：

if($(window).scrollTop() >=200 && $(window).scrollTop() < 500){
    $('#div01').stop().animate({ backgroundColor: "#fff" },500);
}
else{
    $('#div01').stop().animate({ backgroundColor: "#333" },500); 
}

Answer 2

我感觉你的第二个$(window).scroll()覆盖了第一个$(window).scroll(function() { if($(window).scrollTop() >= 500){ $('#div01').stop().animate({ backgroundColor: "#777" },500); } else if($(window).scrollTop() >=200){ $('#div01').stop().animate({ backgroundColor: "#fff" },500); } else{ $('#div01').stop().animate({ backgroundColor: "#333" },500); } });。以下代码应该可以使用。

{{1}}

无论如何，这是您的代码的更干版本。

动画背景颜色多次。

2 个答案: