编码 :
<div id="divtoBlink" ></div>
CSS:
#divtoBlink{
width:100px;
height:20px;
background-color:#627BAE;
}
javascript:
setInterval(function(){
$("#divtoBlink").css("background-color","red");
},100)
但什么都没有发生谁能告诉我我做错了什么?
小提琴Here
编码 :
<div id="divtoBlink" ></div>
CSS:
#divtoBlink{
width:100px;
height:20px;
background-color:#627BAE;
}
javascript:
setInterval(function(){
$("#divtoBlink").css("background-color","red");
},100)
但什么都没有发生谁能告诉我我做错了什么?
小提琴Here
我建议你不要用javascript改变颜色。最好通过 CSS 执行此操作。更改样式应该在样式表中完成,而不是在 JS 中(如果您想更改其他/更多属性)。
您切换一个类,该类具有背景定义(在此示例中,如果您愿意,可以添加更多属性)。作为 DEMO的小提琴
<div id="divtoBlink" ></div>
.blinker{
background: red;
}
let $div2blink = $("#divtoBlink"); // Save reference for better performance
let backgroundInterval = setInterval(function(){
$div2blink.toggleClass("blinker");
},100)
如果你心情比较狂野,可以加点css3动画
#div2blink{
transition: backgroundColor 0.05s ease-in-out;
}
为动画制作了一个演示:DEMO(我在示例中放慢了速度!)
setInterval(function () {
$("#divtoBlink").css("background-color", function () {
this.switch = !this.switch
return this.switch ? "red" : ""
});
}, 100)
.blink-div {
background: green;
animation: flash 2s ease infinite;
}
<div class="blink-div">
Hello World
</div>
另一种为 div 设置动画的方法是使用 css3 动画。
.blink-div {
animation: flash 2s ease infinite;
}
又一个例子,但颜色和速度都很多(基于 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)
你也可以用纯 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;}
}
请看下面的代码
HTML:
<div id="divtoBlink" ></div>
CSS:
#divtoBlink{
width:100px;
height:20px;
background-color:#627BAE;
}
.class2{
background-color:#ff0000 !important;
}
JS:
setInterval(function(){
$("#divtoBlink").toggleClass("class2");
},100)
尝试将颜色一次更改为“红色”,将背景颜色更改为背景颜色
setInterval(function(){
$("#divtoBlink").css("backgroundColor","red");
},100)
如果要切换课程,则必须使用 .toggle