jquery - 背景颜色动画jQuery

Question

我几乎坚持使用Color Animation jQuery插件添加到网站的功能，我想要实现的是每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 所以任何帮助将不胜感激:)

Answer 1

代码就是这样吗？因为您random_color在回调函数中选择了一次而不是选择新的。

Answer 2

你“只是”需要 jQuery UI 来为背景设置动画：

jsBin 演示示例

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