多次動畫背景顏色。

我想在不同的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); 
     } 
});

來源

2014-01-10 kcrocks

我有你的第二個$(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); 
     } 
});

在任何情況下，這是您的代碼更乾的版本。

來源

2014-01-10 03:33:44 knrz

工程就像一個魅力！只是我需要:) – kcrocks

[示例jsfiddle]（http://jsfiddle.net/pxfunc/ypQBS/2/）w /一些重構。您甚至可以在沒有更改時添加其他優化（並且不需要觸發動畫） – MikeM

給另一個條件你的第一個if檢查$(window).scrollTop()小於500：

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

來源

2014-01-10 03:28:27 Felix

謝謝你felix。有用！！！但是當我滾動到頂部時，它不會改回到我開始使用的第一種顏色。任何建議？ – kcrocks

，因爲當$（window）.scrollTop（）小於'200'時，你沒有任何檢查條件。您應該添加另一個條件來實現它 – Felix

ic謝謝！ – kcrocks

多次動畫背景顏色。

回答

相關問題