javascript 随着时间的推移来回用 css 改变颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18582555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change color with css over time back and forth
提问by user2510745
I was wondering if someone could help me change the color of a div from black to white after two seconds, then from white to black after two seconds, back again and so on as long as the div exists. Putting it other way, the div is only shown whenever a user clicks and drags a surface (just like the desktop selection area) and my objective is to change the color of the borders as described above while the user is still making his selection on the surface just as resizing the div.
我想知道是否有人可以帮助我在两秒后将 div 的颜色从黑色更改为白色，然后在两秒后从白色更改为黑色，只要 div 存在，再返回等等。换句话说，仅当用户单击并拖动表面时才会显示 div（就像桌面选择区域一样），我的目标是在用户仍在进行选择时如上所述更改边框的颜色表面就像调整 div 的大小一样。
回答by Tom McQuarrie
If your browser requirements allow you to use css3 you don't need any javascript at all.
如果您的浏览器要求允许您使用 css3，则您根本不需要任何 javascript。
HTML:
HTML：
<div class="blinkdiv">
</div>
CSS:
CSS：
@-webkit-keyframes blackWhite {
0% { background-color: white; }
50% { background-color: white; }
51% { background-color: black; }
100% { background-color: black; }
}
.blinkdiv {
height: 100px;
background-color: black;
-webkit-animation-name: blackWhite;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
}
Here's an example: http://jsfiddle.net/tommcquarrie/w3Qy9/1/
回答by Josh Crozier
This will transition the background color from black to white after every 2 seconds, and repeat..
这将在每 2 秒后将背景颜色从黑色转换为白色，然后重复..
body {
-webkit-animation:name 2s infinite;
}
@-webkit-keyframes name {
0% {background-color:black;}
100% {background-color:white;}
}
jsFiddle demo.. haven't tested it in many browsers.. works in Chrome.
jsFiddle 演示.. 尚未在许多浏览器中对其进行测试.. 适用于 Chrome。
回答by Ethan Brown
There are a couple of ways to do this. You could either use a setTimeoutthat always spawns another setTimeout (until the divdisappears), or you could use a setIntervaland toggle the color (with a clearIntervalto stop the transition if the element should be removed). I feel like the latter approach is a little more straightforward, so I'll use that one:
有几种方法可以做到这一点。你既可以使用的setTimeout总是产生另一个的setTimeout（直至div消失），或者你可以使用一个的setInterval和切换颜色（有clearInterval如果元素应该被删除，停止转换）。我觉得后一种方法更简单一些，所以我会使用那个：
var toggleIntervalId = setInterval( function() {
var $div = $('#toggleMe');
if( $div.length ) {
$div.attr( 'background-color', $div.attr('background-color')=='black'
? 'white' : 'black' );
} else {
clearInterval( toggleIntervalId );
}, 2000 );
回答by John the King
Depending on your requirements and usage of CSS3 (or lack thereof), you may want to do this with Javascript/jQuery, and in particular with jQuery, you will likely want to look into jQueryUI.
根据您的要求和 CSS3 的使用（或缺乏），您可能希望使用 Javascript/jQuery 来执行此操作，尤其是使用 jQuery，您可能需要查看jQueryUI。
I suggest you take a look at this StackOverflow question.
我建议你看看这个 StackOverflow 问题。
However, as for some instant gratification, here's a cross-browser Fiddlemodified from the above question that will probably suffice, or at least give you a good starting point (needless, I still suggest you research this a bit further and look into the links provided as well...)
然而，对于一些即时的满足，这里有一个从上述问题修改而来的跨浏览器小提琴，它可能就足够了，或者至少给你一个好的起点（不必要，我仍然建议你进一步研究一下并查看链接还提供...）
The Fiddle's code:
小提琴的代码：
JQuery:
查询：
function changeColor(element, curNumber){
curNumber++;
if(curNumber > 2){
curNumber = 1;
}
console.log(curNumber);
element.addClass('color' + curNumber, 500);
element.attr('class', 'color' + curNumber);
setTimeout(function(){changeColor(element, curNumber)}, 1000);
}
changeColor($('#testElement'), 0);
CSS:
CSS：
.color1{
background: white;
color: black;
}
.color2{
background: black;
color: white;
}
HTML:
HTML：
<div id="testElement">This will change colors</div>
