我想动画一个div的onclick的背景颜色，但它只是不改变它：动画元素的背景颜色的onclick
HTML
<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);
}
任何想法为什么？ Here's a fiddle
使用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库（见MOUR答案），不带为您的代码进行单一更改（跨浏览器解决方案）。
希望有所帮助。
'：hover'不是onclick行为 – 2014-12-04 11:13:31
没错。回答编辑。 – geevee 2014-12-04 11:16:04
雅，切换类是最好的方式，保持设计逻辑在CSS中。作为一个方面说明，这可能是唯一的CSS解决方案，但不应该在这种情况下使用DIV：http://jsfiddle.net/18v8ofwn/2/ – 2014-12-04 11:31:46
我以前有过这个问题。 JQuery不能为背景颜色制作动画，你需要一个插件来做到这一点。
这里有一个做的：
jQuery默认情况下无法为颜色添加动画。我使用下面的插件时，我必须做这样的事情：
https://github.com/jquery/jquery-color/
您还可以使用动画CSS3执行很好的背景（见：Transition of background-color）
你有一个颜色插入？没有它就无法为背景色创建动画。 你可以在这里找到一个： https://github.com/jquery/jquery-color
检查
http://jsfiddle.net/qggyec4t/16/
$(document).ready(function() {
$("#list2").click(function() {
alert('hii');
$("#list2").animate({
backgroundColor: 'red',
});
});
});
你必须使用jquery-ui.js和jquery-ui.css与您的代码。它会工作得很好。
更新JSFiddle
function changeCol(){
$("#list2").animate({
backgroundColor: "#8bed7e"
}, 500).animate({
backgroundColor: "#ccc"
}, 500);
}
下面是一个工作代码你正在试图做的使用jquery-color-plugin，因为它在Official jQuery documentation
所有动画属性应该是动画到一个单一的数值表示，除非如下所述;大多数非数字属性不能使用基本的jQuery功能来动画（例如，宽度，高度或左侧可以是动画，但背景颜色不能，除非使用jQuery.Color插件）。除非另有说明，否则属性值视为像素数。可以指定单位em和％。
function changeCol() {
$("#list2").animate({
backgroundColor: "red"
}, 500).animate({
backgroundColor: "green"
}, 500);
}#list2 {
width: 200px;
height: 50px;
border: 1px solid #ccc;
background-color: #ccc;
text-align: center;
vertical-align: center;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>
<div id="list2" onclick="changeCol()">
color
</div>
jQuery的动画只能在数值工作，你不能用它的[jQuery的动画的backgroundColor（HTTP背景颜色 – Kinnza 2014-12-04 11:12:24
可能重复：//计算器。 com/questions/190560/jquery-animate-backgroundcolor） – Phoenix 2017-02-10 10:56:53