0

これを使用してテキストの色を変更できることを知っています

$(#text).css('color', 'red');

約 200 ミリ秒の間隔で赤と黒に点滅させるには、javascript をどのようにすればよいですか?

こんな事が出来たら良いのに

    function loop() {
        setTimeout(function () {
            ChangeTextToRed();

            <pause for 300ms here>

            ChangeTextToBlack();
            loop();
        }, 300);
    }

しかし、javascript に thread.sleep がないことは知っています。

4

5 に答える 5

3

setIntervalとjqueryのtoggleClass（）メソッドを使用すると、これを非常に簡単に実行できます。

setInterval(function() {
    $('#text').toggleClass("blink");
}, 300);

他の色のクラスを追加/削除するだけです。jsfiddleで動作するサンプルを表示します：http：//jsfiddle.net/UFfRc/

編集：もう少し情報を提供したかっただけです。このアプローチ（クラスを使用）の利点は、JavaScriptを編集せずにカスタマイズできることです。トランジションやムーブメントなどを追加できます。また、これはcss3トランジションをサポートしていないブラウザでは正常に機能が低下します。彼らは、遷移なしで状態の変化を単に見るでしょう。これがその例です。http://jsfiddle.net/rRXGc/

そうは言っても、責任を持ってください。:)

于 2013-03-10T13:16:29.820 に答える
1

これは大規模なサポートCSS機能ではないことは知っていますが、アニメーションを使用できます

#text{
   animation:blackred 400ms linear infinite; -webkit-animation:blackred 400ms linear infinite; -moz-animation:blackred 400ms linear infinite; -o-animation:blackred 400ms linear infinite;
}

@keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}


@-webkit-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}

@-moz-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}

@-o-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}
于 2013-03-10T13:16:26.187 に答える
1

setInterval次の方法を試すことができます。

setTimeout(function () {
    // do something here
}, 300);

これにより、一定の間隔 (この例では 300 ミリ秒) でコードを実行できます。

于 2013-03-10T12:48:48.970 に答える
1

2 つのクラスを使用setIntervalして切り替えるだけです。

setInterval(function() {
    var newClass = '.'+ $('#text').hasClass('black') ? 'red' : 'black';

    $('#text').attr('class', newClass);
}, 300);
于 2013-03-10T12:48:51.730 に答える
1

すでに を使用setTimeoutしています。2 回実行する必要があります。

function loop() {
    setTimeout(function () { // pause for 300ms before executing this:
        ChangeTextToRed();
        setTimeout(function () { // pause for 300ms before executing this:
            ChangeTextToBlack();
            loop();
        }, 300);
    }, 300);
}

またはそれより短い:

function loop() {
    ChangeTextToRed();
    setTimeout(function () {
        ChangeTextToBlack();
        setTimeout(loop, 300);
    }, 300);
}

もちろん、setInterval変更するブール値フラグを使用して維持することもできますが、上記は十分に単純です。

于 2013-03-10T12:49:45.607 に答える