javascript - onclick 动画元素背景颜色

Question

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

HTML

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

CSS

#list2{ 宽度:200px;高度:100px；边框:1px实心#ccc；背景颜色:#ccc}

JQuery/JS

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

有什么想法吗？ Here's a fiddle

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/

请注意，您可以使用 jQuery UI 库(请参阅 mour 答案)来代替 CSS3，而无需对代码进行任何更改(跨浏览器解决方案)。

希望有帮助。