Fade background color with jQuery?

[schart]

So I need to be able to fade to another background color using jQuery. Let’s say from #6495CA to #CD3333 for example. Thanks.

[Steven Morgan]

Is this an on click event or anything? If so the basic idea is:

$("#yourDiv").click(function() {
    $(this).toggleClass('clicked');
});

And in your CSS:

#yourDiv {
   background-color: #6495CA;
}
.clicked {
     background-color: #CD3333;
}

So basically, your div will be whatever color it is supposed to be in your CSS. Then when it’s clicked, it will add the class ‘clicked’ which will override the original color with the new ‘clicked’ bg color.

[Paulie_D]

You’d have to add a transition to get the fade. That’s not hard though.

[Steven Morgan]

You could do something like this:
$(‘body’).animate({backgroundColor: ‘#CD3333’}, ‘slow’);

[Paulie_D]

Is it that simple?

It sure is

http://codepen.io/anon/pen/LyiFg

[Steven Morgan]

^perfect

[Author]

Posts