我試圖使用Jquery動畫功能來更改div的背景顏色。如果一個隨機數低於50，則生成紅色，如果高於50，則生成綠色。除了顏色變化之外，一切似乎都奏效。我在這裏做錯了什麼？基於值的背景顏色褪色
function randomInt(min,max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
if (randomInt(1, 100) > 50) {
$('#status').html("win").animate({backgroundColor: "green" }, "fast");
} else {
$('#status').html("lose").animate({ backgroundColor: "red" }, "fast");
}
您必須要麼使用jQuery UI的或特殊的顏色插件動畫的顏色 - 與大多數其他的CSS屬性。
大概不會使用jQuery animate()但與CSS3 transition。
CSS：
#status {
-webkit-transition: background-color 2000ms linear;
-moz-transition: background-color 2000ms linear;
-o-transition: background-color 2000ms linear;
-ms-transition: background-color 2000ms linear;
transition: background-color 2000ms linear;
}
的jQuery：
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
if (randomInt(1, 100) > 50) {
$('#status').html("win").css({
backgroundColor: "green"
});
} else {
$('#status').html("lose").css({
backgroundColor: "red"
});
}
看到這個jsfiddle。
但是，如果你真的想用純jQuery做到這一點，你可以使用jQuery Color這比整個UI庫更輕。
如果你不想使用JQuery UI或特殊的插件。 **只是想展示「綠色」或「紅」的顏色則有其他的工作液：
function randomInt(min,max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var status = $('#status');
if (randomInt(1, 100) > 50) {
status.append("win");
status.css({backgroundColor: 'green'});
} else {
status.append("lose");
status.css({backgroundColor: 'red'});
}
本帖]（http://stackoverflow.com/q/190560/1806218）回答你的問題。 – wannaKnowItAll
Duplicated http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor –