Question

我对jQuery很新。我创建了一个小脚本来动画DIV的颜色背景和循环中另一个DIV的边框颜色。我使用jquery颜色插件，脚本工作！（难以置信）

问题是我的脚本速度慢，而且我的页面加载有问题（特别是对于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]);

jQuery颜色插件

1 个答案: