javascript - 使用 setInterval 在 jquery 中闪烁带有背景颜色的 div

Question

代码:

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

CSS:

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

JavaScript:

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

但是什么都没有发生 谁能告诉我我做错了什么？

fiddle Here

Answer 1

我建议您不要使用 javascript 更改颜色。最好通过 CSS 执行此操作。更改样式应该在样式工作表中完成，而不是在 JS 中(如果您想要更改其他/更多属性)。

你切换一个类，那个类有一个背景定义(在这个例子中，如果你想你可以添加更多的属性)。 fiddle as 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 (我在示例中放慢了速度!)