使用setInterval在jquery中使用background-color闪烁div

Question

代码 :

<div id="divtoBlink" ></div>

CSS:

#divtoBlink{
 width:100px;
 height:20px;
 background-color:#627BAE;
}

JavaScript的:

setInterval(function(){
  $("#divtoBlink").css("background-color","red");
  },100)

但没有任何事情可以让任何人告诉我我做错了什么？

小提琴 Here

Answer 1

我建议你不要用javascript改变颜色.通过CSS执行此操作更好.更改样式应该在样式表中完成,而不是在javascript中(如果更改了其他/更多属性).

您可以切换类,该类具有背景定义(在此示例中,如果您希望可以添加更多属性).作为DEMO的小提琴

<div id="divtoBlink" ></div>

.backgroundChange{
    background: red;
}

let $div2blink = $("#divtoBlink"); // Save reference for better performance
let backgroundInterval = setInterval(function(){
    $div2blink.toggleClass("backgroundChange");
 },100)

如果您觉得心情狂热,可以添加一些css3动画

#div2blink{
    transition: backgroundColor 0.05s ease-in-out;
}

为动画做了一个演示:DEMO(我在示例中放慢了速度!)

Answer 2

DEMO

setInterval(function () {
    $("#divtoBlink").css("background-color", function () {
        this.switch = !this.switch
        return this.switch ? "red" : ""
    });
}, 100)

Answer 3

.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;
}