Changing the background color of a section

Question

I\'m trying to use jQuery to change the background color of a

section when pressing on a button, and below is the code to do that. Why isn\

相关标签:

Answer 1

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.

Answer 2

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.

Answer 3

You have several problems:

1. Your selector is wrong: $("#bgcolor")
2. You're missing a closing </div> tag.
3. 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/