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]);