Question

我正在尝试使用jQuery在按下按钮时更改<div>部分的背景颜色，以下是执行此操作的代码。为什么不起作用？

HTML文件

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>

</html>

的script.js

$("bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

感谢。

Answer 1

你有几个问题：

您的选择器错误：$("#bgcolor")
您错过了结束</div>代码。
您需要jQueryUI动画background-color。

HTML：

<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</div>

JS：

$("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

您的代码已修复（并且包含jQueryUI）：http://jsfiddle.net/andrewwhitaker/rAVj9/

Answer 2

来自jQuery网站：

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理。（例如，宽度，高度或左边可以设置动画，但背景颜色不能。）

使用jquery UI包为颜色设置动画。

Answer 3

确保将CSS选择器包含在您希望定位的jQuery中。

$("bgcolor").click(function(){

应该是：

$("#bgcolor").click(function(){

因为您要定位ID。

更改<div>部分的背景颜色</div>

3 个答案: