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/