Toggle background color with transitions on a click

Question

This seems like something that should be pretty easy, but I really can't find a way to do it.

animation http://doir.ir/css.gif

I need to change & transition the background color of a page when you click on these respective links. The closest thing I've seen that triggers this type of transition is this:

changing body background color using only html5 and css3 with a demo

which is extremely close, but this only works when the mouse is hovered over the link. I've tried replacing the pseudo selector of :hover to everything imaginable, but nothing 'sticks' after you click a link.

Basically, I have a list of links, and when you click on any link, it plays a different song (via html5 ). I want the background to transition-change depending on the song that is currently playing. I can use javascript or jquery if its necessary. Any advice?

Answer 1

Hows this? http://jsfiddle.net/u6PPn/2/

The key part is the jQuery:

$(".color").click(function() {
    var color = $(this).text();
    $("body").animate({ backgroundColor:color},1000);
});

HTML:

<div class="color">Red</div>
<div class="color">Green</div>
<div class="color">Blue</div>

This way you can set n colors.