javascript - 通过遍历数组更改背景颜色

Question

我的页面上有一个浅蓝色背景的容器，我希望每次点击时背景逐渐变暗。在这一点上，我很高兴手动设置我的颜色数组(我们将把这个问题留到另一天)但是我无法像我想要的那样改变或迭代数组的背景颜色。

目前，我收到警告，提示我在解析我的背景颜色时出错。我已经尝试在 css 文档中为 .content 设置背景颜色并将其删除，但是这两种方法都不起作用(除非我删除它，否则根本没有背景颜色)

这是我目前拥有的代码的粗略含义。我基于来自另一个线程的这个 jsfiddle 构建了它，尽管它不完全匹配:http://jsfiddle.net/arunpjohny/3eGM5/

$(document).ready(function() {
var blues = ['#c4c4fd', '#5d5dbc'],
    counter = 0;

$(".content").click(function() {

    $(".content").animate({
        backgroundColor: blues[counter++]});


#the text in this div also changes on click, so here's my animation for that. 
#This is working fine, but I figured I'd include it just to be safe


    var current = $('.active');
        var next = current.next('.section');

        if(next.length === 0) {
            next = $('.section').first();
        };

        current.fadeOut(400).removeClass('active');
        next.delay(100).fadeIn(1500).addClass('active');
    });

});

我是否缺少一个明显的解决方案？我对 jQuery 和将所有东西放在一起还是很陌生，所以如果你能给我指出任何建议或方向，我将不胜感激!

Answer 1

您的颜色没有动画，因为您需要使用 jQuery Color plugin动画颜色。

因此您需要在您的标记中包含 jquery 颜色插件，然后将您的动画代码更改为看起来与此类似。

$("#block").animate({
        backgroundColor: $.Color(blues[counter++])
}, 1500 );