onclick 动画元素背景颜色

Question

我正在尝试为 div onclick 的背景颜色设置动画，但它根本没有改变它：

超文本标记语言

<div id="list2" onclick="changeCol();">
    color
</div>

CSS

#list2{ width:200px; height:100px; border:1px solid #ccc; background-color:#ccc}

jQuery/JS

function changeCol(){
    alert('foo'); // testing function called
    $("#list2").animate({
      backgroundColor: "#8bed7e"
    }, 500).animate({
      backgroundColor: "#ccc"
    }, 500);
}

有什么想法吗？这是一个小提琴

Answer 1

使用CSS3（仅适用于支持CSS3的浏览器，不支持的浏览器将改变颜色但没有动画）：

html:

<div id="list2">color</div>

CSS：

#list2{background:red;transition:0.5s ease;-moz-transition:0.5s ease;-webkit-transition:0.5s ease;}
#list2.clicked{background:blue;}

js:

$(function(){ 
    $('#list2').click(function(){ 
        $(this).toggleClass('clicked') 
    }) 
});

这里的工作示例： http: //jsfiddle.net/18v8ofwn/1/

请注意，您可以使用该库代替 CSS3 jQuery UI（请参阅我们的答案），而无需对代码进行任何更改（跨浏览器解决方案）。

希望有帮助。