点击时切换背景颜色和过渡

Question

这似乎应该很容易,但我真的找不到办法.

动画http://doir.ir/css.gif

当您单击这些相应的链接时,我需要更改和转换页面的背景颜色.我见过的最接近这种类型的过渡的是:

仅使用html5和css3 和演示来改变身体背景颜色

这是非常接近的,但这仅在鼠标悬停在链接上时才有效.我已经尝试将伪选择器替换为:悬停到可以想象的所有东西,但是在点击链接后没有任何东西"粘住".

基本上,我有一个链接列表,当你点击任何链接时,它会播放一首不同的歌曲(通过html5).我希望背景根据当前正在播放的歌曲进行转换.如果必要,我可以使用javascript或jquery.有什么建议？

Answer 1

这个怎么样？http://jsfiddle.net/u6PPn/2/

关键部分是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>

这样你就可以设置n颜色.

Answer 2

我有一个非常多样化的解决方案!

顺便说一句:感谢您的巨大挑战: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