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

通过迭代数组来改变背景颜色

1 个答案: