jQuery颜色插件

Question

我对 jQuery 很陌生。我创建了一个小脚本来为循环中的 DIV 的颜色背景和另一个 DIV 的边框颜色设置动画。 我使用了 jquery color 插件并且脚本有效！ （难以置信）

问题是我的脚本非常慢，而且页面加载有问题（尤其是 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]);