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中（如果更改了其他/更多属性）。

您可以切换类，该类具有背景定义（在此示例中，如果您希望可以添加更多属性）。一个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（我在示例中放慢了速度！）

Answer 2

DEMO

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

Answer 3

＆＃13;

.blink-div {
    background: green;
    animation: flash 2s ease infinite;
}

＆＃13;

<div class="blink-div">
  Hello World
</div>

＆＃13;

动画div的另一种方法是使用css3动画。

.blink-div {
   animation: flash 2s ease infinite;
}

Answer 4

又一个例子，但有很多颜色和速度（基于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)

http://jsfiddle.net/LkuNB/1983/

Answer 5

您也可以使用纯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;}
}

Answer 6

请看下面的代码

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)

Answer 7

尝试将颜色一次更改为“红色”，将背景颜色更改为backgroundColor

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

如果你想切换课程，那么你必须使用.toggle

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

7 个答案: