使用setInterval在jquery中使用background-color闪烁div [英] Blinking a div with background-color in jquery using setInterval

问题描述

代码：

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

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 这里

fiddle Here

推荐答案

我建议你不要用javascript改变颜色。最好的做法是通过CSS。更改样式应在样式表中完成，而不是在JavaScript中完成（也许您希望其他属性闪烁）。

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 (maybe you want other properties blinking).

您可以切换一个类，该类有一个背景定义这个例子，如果你想要你可以添加更多的属性）。 小提示作为示范

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

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

.backgroundRed{
    background: red;
}

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

---

如果你觉得自己是一个狂野的心情，你可以添加一些css3动画到

---

If you feel like a wild mood, you can add some css3 animation to it

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

为动画制作演示： DEMO （我在示例中放慢了速度！）

Made a demo for the animation: DEMO (I slowed it down in the example!)

这篇关于使用setInterval在jquery中使用background-color闪烁div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！