jQuery 使用setInterval在jquery中使用背景颜色闪烁div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19049484/
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
Blinking a div with background-color in jquery using setInterval
提问by Sora
the code :
编码 ：
<div id="divtoBlink" ></div>
css:
css：
#divtoBlink{
width:100px;
height:20px;
background-color:#627BAE;
}
javascript:
javascript:
setInterval(function(){
$("#divtoBlink").css("background-color","red");
},100)
but nothing is happening can anyone tell me what i am doing wrong ?
但什么也没发生，谁能告诉我我做错了什么？
fiddle Here
小提琴 Here
回答by Martijn
I suggest you don't change the color with javascript. It's better practice to do this via CSS. Changing styles should be done in a stylesheet, not in javascript (in case of other/more properties changed).
我建议你不要用 javascript 改变颜色。通过 CSS 执行此操作是更好的做法。更改样式应该在样式表中完成，而不是在 javascript 中（在其他/更多属性更改的情况下）。
You can toggle a class, the class has a background definition (in this example, if you want you can add more properties). A fiddle as DEMO
你可以切换一个类，这个类有一个背景定义（在这个例子中，如果你想你可以添加更多的属性）。一个提琴DEMO
<div id="divtoBlink" ></div>
.backgroundChange{
background: red;
}
let $div2blink = $("#divtoBlink"); // Save reference for better performance
let backgroundInterval = setInterval(function(){
$div2blink.toggleClass("backgroundChange");
},100)
If you feel like a wild mood, you can add some css3 animation to it
如果你觉得心情很狂野，可以给它添加一些css3动画
#div2blink{
transition: backgroundColor 0.05s ease-in-out;
}
Made a demo for the animation: DEMO(I slowed it down in the example!)
为动画制作了一个演示：DEMO（我在示例中放慢了速度！）
回答by A. Wolff
回答by Desmond
.blink-div {
background: green;
animation: flash 2s ease infinite;
}<div class="blink-div">
Hello World
</div>Another way to animate a div is by using the css3 animations.
另一种为 div 设置动画的方法是使用 css3 动画。
.blink-div {
animation: flash 2s ease infinite;
}
回答by mrtobo
Yet another example, but with much color and speed (based on martijn's example). Seizure warning:
另一个例子，但有很多颜色和速度（基于 martijn 的例子）。扣押警告：
var $div2blink = $("#divtoBlink"); // Save reference, only look this item up once, then save
var color = 0
var color_classes = ["backgroundRed", "backgroundYellow", "backgroundBlue"];
var backgroundInterval = setInterval(function(){
color++;
if (color === 3){
color = 0;
}
$div2blink.toggleClass(color_classes[color]);
},10)
回答by Adam Genshaft
You can also do it with pure CSS:
您也可以使用纯 CSS 来实现：
#divtoBlink{
-webkit-animation: bgblink 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
}
@-webkit-keyframes bgblink {
from {background-color: #fff;}
50% {color:#000}
to {background-color: #fff;}
}
@keyframes bgblink {
from {background-color: #fff;}
50% {background-color:#000}
to {background-color: #fff;}
}
回答by Ganesh Pandhere
Please have a look at below code
请看下面的代码
HTML:
HTML：
<div id="divtoBlink" ></div>
CSS:
CSS：
#divtoBlink{
width:100px;
height:20px;
background-color:#627BAE;
}
.class2{
background-color:#ff0000 !important;
}
JS :
JS：
setInterval(function(){
$("#divtoBlink").toggleClass("class2");
},100)
回答by Zwen2012
Try this to change the color one time to "red", change background-color to backgroundColor
尝试将颜色一次更改为“红色”，将背景颜色更改为背景颜色
setInterval(function(){
$("#divtoBlink").css("backgroundColor","red");
},100)
If you want to toggle the class, than you have to do it with .toggle
如果您想切换课程，则必须使用 .toggle
