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)

しかし、何も起こっていません。誰かが私が間違っていることを教えてもらえますか?

フィドルHere

score 34 · Accepted Answer

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 (例では速度を落としました!)

score 7 · Accepted Answer

デモ

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

score 5 · Accepted Answer

.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;
}

score 4 · Accepted Answer

さらに別の例ですが、多くの色と速度があります (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/

score 3 · Accepted Answer

純粋な 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;}
}

score 1 · Accepted Answer

以下のコードを見てください

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)

score -1 · Accepted Answer

これを試して、色を一度「赤」に変更し、背景色を背景色に変更します

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

クラスを切り替えたい場合は、 .toggle で行う必要があります

javascript - setIntervalを使用してjqueryで背景色でdivを点滅させる

7 に答える 7

Related

Reference