使用点击转换来切换背景颜色 [英] Toggle background color with transitions on a click

问题描述

这似乎应该很容易，但我真的找不到办法做。

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

动画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:

仅使用html5和css3更改主体背景颜色
和演示

这是非常接近的，但这只有当鼠标悬停在链接上时才有效。我试过替换伪选择器：hover到一切可以想象的，但没有什么'stick'，当你点击一个链接。

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.

基本上，我有一个链接列表，当你点击任何链接，它播放不同的歌曲（通过html5）。我想让背景根据当前正在播放的歌曲进行转换。我可以使用javascript或jquery如果它的必要。任何建议？

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?

推荐答案

http://jsfiddle.net/u6PPn/2/

关键部分是jQuery：

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>

这样可以设置 n 颜色。

这篇关于使用点击转换来切换背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！