隨着時間的推移來回更改CSS的顏色

Question

我想知道是否有人可以幫助我將div的顏色在兩秒鍾后從黑色更改為白色，然后在兩秒鍾后從白色更改為黑色，然后再次更改，依此類推，只要div存在即可。 換句話說，僅當用戶單擊並拖動表面時才顯示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演示 ..尚未在許多瀏覽器中測試過。

Answer 3

有兩種方法可以做到這一點。 你既可以使用的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 );

Answer 4

根據您的要求和CSS3的使用（或缺少CSS3），您可能希望使用Javascript / jQuery，尤其是使用jQuery，可能需要研究jQueryUI 。

我建議您看看這個StackOverflow問題 。

但是，就某些即時滿足而言，這是對上述問題的跨瀏覽器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>