Changing a div background color through a hyperlink

Question

Hello Stackoverlowers!

I need to sort out my div's and ensure that the background color of a div changes when a certain hyperlinks are closed.

My JS mark up is:

<script>
$("bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

My HTML is:

<div id="blackandwhite"> text here </div>

My CSS is:

#blackandwhite { width:100%; #FFFFFF; }

The link structure I am using to trigger the div to change color is like this:

<li><a href="#secondpagename" class="bgcolor"> link text </a></li>

Really cannot work out why it is not working and will appreciate any and all help! I feel like I am almost there.

All I want to do is to have the hyperlink change the div background. This hyperlink is also and will remain outside of the div. Any ideas?

Answer 1

There are two problems you need to address

1. The selector needs to look for the class bgcolor and hence should be .bgcolor
2. Probably need to prevent the default action of the hyperlink via e.preventDefault() . Not 100% sure about your intent here but if it's just to change the color and not jump in the page then this is likely what you want.

Try the following instead

$(".bgcolor").click(function(e) {
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");
    e.preventDefault()
});

EDIT

As others have pointed out jQuery doesn't support animation out of the box. It does support direct changes of the color though via css

$("#blackandwhite").css(backgroundColor: '#000000');

If you really want color animation though there are a number of plugins available. For example

• http://www.bitstorm.org/jquery/color-animation/

Answer 2

You have forgotten the dot: .bgcolor

$(".bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

Apart from that, I think it should work.

Answer 3

jQuery didn't support color animation "out of the box". Only "numeric" properties can be animated. You still can set you background color "directly", without an animation.

$(".bgcolor").click(function(){
    $("#blackandwhite").css(backgroundColor: '#000000');
});

If you are still want to animate color, you can try this plugin: http://www.bitstorm.org/jquery/color-animation/

Answer 4

Your select needs to be prefixed with a dot to pick elements that have the matching class instead of matching tag name:

$(".bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

Answer 5

The identifier for your click function is incorrect. It should be:

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

Note the dot to represent that it is searching for a class. Also the script needs to either be placed after the element, or in document.ready() tags.

Answer 6

First you are trying to select by css class. Correct selector syntax for this is .<classname> . So your selector for binding the click event should be:

$(".bgcolor")

jQuery selectors

---

Beware that jQuery cannot animate colors out of the box, you have to use the Color plugin, or to use jQuery UI which overloads the animate() method to support animating colors.

From the .animate() documentation :

... 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 , unless the jQuery.Color() plugin is used)///