Toggle Hintergrundfarbe mit Übergängen auf einen Klick

Question

Dies scheint wie etwas, das ziemlich einfach sein sollte, aber ich kann wirklich keinen Weg finden, es zu tun.

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

Ich brauche & Übergang der Hintergrundfarbe einer Seite zu ändern, wenn Sie auf diesem entsprechenden Link klicken. Das nächste, was ich gesehen habe, dass diese Art von Übergang auslöst, ist dies:

changing body background color using only html5 and css3 mit einem demo

, die ganz in der Nähe, aber das funktioniert nur, wenn die Maus über den Link schwebt. Ich habe versucht, den Pseudo-Selektor von: hover auf alles, was man sich vorstellen kann, zu ersetzen, aber es bleibt nichts übrig, nachdem man auf einen Link geklickt hat.

Grundsätzlich habe ich eine Liste von Links, und wenn Sie auf einen Link klicken, spielt es ein anderes Lied (via HTML5). Ich möchte, dass sich der Hintergrund beim Übergang ändert, je nachdem, welcher Titel gerade abgespielt wird. Ich kann Javascript oder jquery verwenden, wenn es notwendig ist. Irgendein Rat?

Answer 1

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

Der wichtigste Teil ist die 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> 

Auf diese Weise können n Farben einstellen.

Answer 2

Ich habe eine sehr vielfältige Lösung für Sie!

BTW: Vielen Dank für die große Herausforderung: p

<button value="black" class="black btn">Black</button> 
<button value="red" class="red btn">Red</button> 
<button value="brown" class="brown btn">Brown</button> 
<button value="orange" class="orange btn">Orange</button> 
<button value="mediumSeaGreen" class="green btn">MediumSeaGreen</button> 

CSS

body { 
    -webkit-transition: .6s ease; 
    -moz-transition: .6s ease; 
    -ms-transition: .6s ease; 
    -o-transition: .6s ease; 
} 

jQuery

$('.btn').on('click', function() { 
    var valColor = $(this).val(); 

    $('body').css({ 
     background: valColor   
    }); 
}); 

JSFIDDLE