jquery - jqueryフラッシュ/cssで境界線の色を変更

Question

他のjqueryプラグインを使用せずに、divの境界線の色を継続的にフラッシュ/変更したいと考えています。したがって、白で開始し、1秒後にオレンジに変更してから繰り返します。

Answer 1

Css：

#my-div { border: 1px solid white; }
#my-div.orange-border { border: 1px solid #f93; }

HTML：

<div id="my-div"></div>

JavaScript：

var flashInterval = setInterval(function() {
    $('#my-div').toggleClass('orange-border');
}, 1000);

点滅を停止するには：

window.clearInterval(flashInterval);

フラッシュなしのソリューション：

$('#my-div').css({ border: '1px solid white' });

setInterval(function() {
    var isWhite = $('#my-div').css('border-color') == 'rgb(255, 255, 255)';
    $('#my-div').css({ 'border-color' : isWhite ? '#f93' : '#fff' });
}, 1000);​

RGBの比較では少しハックっぽく見えます。前後に切り替えるフラグ（おそらくデータプロパティ）があると便利な場合があります。

$('#my-div').css({ border: '1px solid white' }).data('white', true);

setInterval(function() {
    var isWhite = $('#my-div').data('white');
    $('#my-div').css({ 'border-color' : isWhite ? '#f93' : '#fff' }).data('white', !isWhite);
}, 100);​

Answer 2

function makewhite() {
  setTimeout(function() {
        $('#problem').css('border-color','#ffffff');
        makeOrange();
    }, 1000);

}
function makeOrange() {
  setTimeout(function() {
        $('#problem').css('border-color','#F37543');
        makewhite();
    }, 1000);

}

makewhite();

いたるところを見て、私の問題に対する直接的な解決策を見つけることができなかったので、私はうまくいく上記を構築しました。

これを書くためのより速い方法があると確信しています...

Answer 3

互換性の要件によっては、css のみでこれを行うことができます。

@-webkit-keyframes DIV-BORDER {
    0%   { border-color: orange }
    50%  { border-color: white }
    100% { border-color: orange }
}

div {
    border: 1px solid;

    -webkit-transition: all 1s;
    -webkit-animation: DIV-BORDER 2s infinite;
}​

それに応じてベンダー プレフィックスを追加します。

編集: webkit ブラウザーで動作するサンプルフィドル。