javascript - 使用setInterval在jQuery中使用背景颜色闪烁div

编码 :

<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来做到这一点。更改样式应该在样式表中完成，而不是在javascript中完成(如果更改了其他/更多属性)。

您可以切换一个类，该类具有背景定义(在本示例中，如果需要，您可以添加更多属性)。一个fiddle as 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(在示例中，我放慢了速度!)