背景颜色动画jQuery

时间:2012-07-18 23:25:20

标签: jquery

我几乎坚持使用Color Animation jQuery plugin添加到网站的功能,我想要实现的是每隔3秒和每次用户切换某个div的颜色加载页面这个颜色也会有所不同,加载的东西工作得很好但是当涉及到动画时它是我遇到麻烦的地方,继承我的代码......

var colors = ["#00b6ad", "#fdbc5f", "#d91b5c", "#f1592a", "#8dc63f"];                
var rand = Math.floor(Math.random()*colors.length); 
var random_color = colors[rand];          
$('#slider-area').css("background-color", random_color);
setInterval(function(){
   $('#slider-area').animate({backgroundColor: random_color} 500);}
, 3000); ​

我认为它可能与在animate属性中传递变量有关,因为如果我在backgroundColor上自己设置一个颜色我就没有问题我一直在谷歌上搜索但是我无法使其工作:S所以任何帮助都将是赞赏:))

2 个答案:

答案 0 :(得分:3)

代码完全是那个吗?因为您选择了一次random_color而没有在回调函数中选择一个新的。{/ p>

答案 1 :(得分:2)

你"只是"需要jQuery UI来动画背景:

jsBin demo example

var colors = ["#00b6ad", "#fdbc5f", "#d91b5c", "#f1592a", "#8dc63f"]; 

function generateColor(){
    var color = colors[ Math.floor(Math.random()*colors.length) ]; 
    $('#slider-area').stop().animate({backgroundColor: color}, 500);
}
generateColor();

setInterval(generateColor, 2000);