javascript - DivのCSSを一定期間変更する

Question

$("#team").css("background-color","blue");

id：teamの背景色を青に変えたいのですが、この色に変えたいのは4秒間だけです。

どうすればよいですか？

私はグーグルで検索しましたが、特定の時間枠でのcssの変更に関して何も見つかりませんでした。

また、以前の設定からのフェードアウト/フェードイン/フェードインもいい感じです。

Answer 1

4秒間だけ青く表示したい場合は、次のようにします。

var element = $( "#team" );
var oldColor = element.css( "background-color" );
element.animate( { "background-color": "blue" } )
       .delay( 4000 )
       .animate( { "background-color": oldColor } );

にはjQueryUIが必要です。.animate()それ以外の場合は、を使用できます.css()。

Answer 2

タイマー機能を使用する必要があります。

setTimeout(function() { 
     $('#team').css('background-color', 'whatever'); 
}, 4000);

2番目の引数は、最初の引数（関数）が呼び出されるまでの待機時間のミリ秒単位のカウントです。

「以前の状態に戻る」と言う機能は組み込まれていません。独自のコードで古い値を覚えておく必要があります。

Answer 3

jQuery UIプラグインを使用したくない場合（おそらくそのサイズが原因）、手動でアニメーション化を行うことができます。

jsFiddleで動作する次のコードを参照してください。

function animblue(selector, from, to, step) {
    var
        target = $('#target'),
        color = from,
        next;
    next = function () {
        var hex = (Math.floor(color) < 16 ? '0' : '') + Math.floor(color).toString(16);
        target.css('background-color', '#' + hex + hex + 'ff');
        color += step;
        if (!((color < from && color < to) || (color > from && color > to))) {
            setTimeout(next, 10);
        }
    };
    next();
}

$('#action').on('click', function () {
    animblue('#target', 255, 0, -255 / 16);
    window.setTimeout(function () {
        animblue('#target', 0, 255, 255 / 16);
    }, 4000);
});​