javascript - 時間の経過とともにCSSで色を前後に変更する

Question

div が存在する限り、誰かが div の色を 2 秒後に黒から白に変更し、2 秒後に白から黒に変更するのを手伝ってくれるかどうか疑問に思っていました。別の言い方をすれば、div は、ユーザーがサーフェスをクリックして (デスクトップの選択領域と同じように) ドラッグしたときにのみ表示されます。私の目的は、ユーザーがまだ選択を行っている間に、上記のように境界線の色を変更することです。 divのサイズを変更するのと同じように表面。

Answer 1

ブラウザの要件で css3 を使用できる場合は、javascript はまったく必要ありません。

HTML:

<div class="blinkdiv">
</div>

CSS:

@-webkit-keyframes blackWhite {  
  0% { background-color: white; }
  50% { background-color: white; }
  51% { background-color: black; }
  100% { background-color: black; }
}

.blinkdiv {
    height: 100px;
    background-color: black;
    -webkit-animation-name: blackWhite;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}   

例を次に示します: http://jsfiddle.net/tommcquarrie/w3Qy9/1/

Answer 2

これにより、2 秒ごとに背景色が黒から白に変わり、これが繰り返されます。

body {
    -webkit-animation:name 2s infinite;
}

@-webkit-keyframes name {
    0% {background-color:black;}
    100% {background-color:white;}
}

jsFiddle デモ.. 多くのブラウザでテストしていません.. Chrome で動作します。

Answer 3

要件と CSS3 の使用法 (またはその欠如) に応じて、Javascript/jQuery でこれを行いたい場合があり、特に jQuery を使用する場合は、jQueryUIを調べる必要があります。

この StackOverflow questionをご覧になることをお勧めします。

ただし、すぐに満足できるものについては、上記の質問から変更されたクロスブラウザーのFiddleを次に示します。これでおそらく十分であるか、少なくとも良い出発点が得られます (不要ですが、これをもう少し調査してリンクを調べることをお勧めします)。も提供されます...）

フィドルのコード:

JQuery:

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 2){
        curNumber = 1;
    }
    console.log(curNumber);
    element.addClass('color' + curNumber, 500);
    element.attr('class', 'color' + curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 1000);  
}

changeColor($('#testElement'), 0);

CSS:

.color1{
    background: white;
    color: black;
}

.color2{
    background: black;
    color: white;
}

HTML:

<div id="testElement">This will change colors</div>

Answer 4

これを行うにはいくつかの方法があります。常に別の setTimeout を生成する setTimeout を (が消えるまで)div使用するか、setInterval を使用して色を切り替えることができます(要素を削除する必要がある場合は、clearIntervalを使用して遷移を停止します)。後者のアプローチはもう少し簡単だと思うので、それを使用します。

var toggleIntervalId = setInterval( function() {
    var $div = $('#toggleMe');
    if( $div.length ) {
        $div.attr( 'background-color', $div.attr('background-color')=='black' 
            ? 'white' : 'black' );
    } else {
        clearInterval( toggleIntervalId );
}, 2000 );