8

编码 :

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

CSS:

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

javascript:

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

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

小提琴Here

4

7 回答 7

34

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

您切换一个类,该类具有背景定义(在此示例中,如果您愿意,可以添加更多属性)。作为 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(我在示例中放慢了速度!)

于 2013-09-27T11:25:55.037 回答
7

演示

setInterval(function () {
    $("#divtoBlink").css("background-color", function () {
        this.switch = !this.switch
        return this.switch ? "red" : ""
    });
}, 100)
于 2013-09-27T11:25:14.177 回答
5

.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;
}
于 2015-08-14T03:32:51.770 回答
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/

于 2016-07-08T14:41:55.243 回答
3

你也可以用纯 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;}
}
于 2014-10-14T15:46:22.140 回答
1

请看下面的代码

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)
于 2013-09-27T11:28:23.213 回答
-1

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

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

如果要切换课程,则必须使用 .toggle

于 2013-09-27T11:27:02.813 回答