jQuery顏色插件

Question

我對jQuery非常陌生。我創建了一個腳本來爲DIV的顏色背景和另一個DIV的邊框顏色製作循環動畫。 我用jquery color插件和腳本工作！ （難以置信）

的問題是，我的劇本是veeery慢，我有一個頁面加載（尤其是IE）問題 這是腳本：

<script type="text/javascript"> 
$(document).ready(function() {     
     spectrum(); 
     function spectrum(){ 
     $('#rt-main').animate({ backgroundColor: "#aeff00" }, 5000); 
     $('#rt-main').animate({ backgroundColor: "#ff6c00" }, 5000); 
     $('#rt-main').animate({ backgroundColor: "#0086b6" }, 5000); 
     $('#rt-main').animate({ backgroundColor: "#00a4a8" }, 5000); 
     $('#rt-main').animate({ backgroundColor: "#d43795" }, 5000); 
     $('#rt-main').animate({ backgroundColor: "#ffd200" }, 5000); 
     $('#rt-header').animate({ borderTopColor: "#aeff00" }, 5000); 
     $('#rt-header').animate({ borderTopColor: "#ff6c00" }, 5000); 
     $('#rt-header').animate({ borderTopColor: "#0086b6" }, 5000); 
     $('#rt-header').animate({ borderTopColor: "#00a4a8" }, 5000); 
     $('#rt-header').animate({ borderTopColor: "#d43795" }, 5000); 
     $('#rt-header').animate({ borderTopColor: "#ffd200" }, 5000); 
     spectrum(); 
    } 

    }); 
</script> 

我敢肯定有一個更好的方法做同樣的事情。 在這裏你可以看到一個演示。 （在IE中不起作用）

Answer 1

主要問題是您的計時設置爲5秒，並且您在同一2個元素（在此演示中）將背景更改爲5次（甚至在其完成動畫之前） 。

你想完成什麼？

編輯：

試試這個：

var i = 0; 
var colorArray = ["#aeff00", "#ff6c00", "#0086b6", "#00a4a8", "#d43795", "#ffd200"]; 

function changeColor(element,element2,color) 
{ 
    $(element).animate( 
    { 
     backgroundColor: color 
    }, 5000, function(){ 
     if(i<=colorArray.length) 
     { 
      i++; 
     } 
     else 
     { 
      i=0; 
     } 
     changeColor(element,element2,colorArray[i]); 
    }); 

    $(element2).animate( 
    { 
     borderTopColor: color 
    }, 5000}); 


} 

changeColor('#rt-main', '#rt-header', colorArray[i]);