Changing the background color of a section

I'm trying to use jQuery to change the background color of a <div> section when pressing on a button, and below is the code to do that. Why isn't it working?

HTML file

<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");}
);

Thanks.

You have several problems:

Your selector is wrong: $("#bgcolor")
You're missing a closing </div> tag.
You need jQueryUI to animate 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");}
);

Your code, fixed (and working with jQueryUI included): http://jsfiddle.net/andrewwhitaker/rAVj9/

From the jQuery website:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

Use jquery UI package to animate colors.

Ensure you include the CSS selector inside the jQuery that you wish to target.

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

Should be:

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

Because you are targeting an ID.

来源：https://stackoverflow.com/questions/7622170/changing-the-background-color-of-a-div-section

标签

jquery

jquery-animate

Changing the background color of a <div> section