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

I'd like to turn the background colour of id:team to blue however I would only like to turn it this colour for 4 seconds.

How do I do this?

I've Googled around but I couldn't find anything regarding changing css for a given time frame.

Also, a fading out/in from/to the previous settings would be a nice touch.

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

I'd like to turn the background colour of id:team to blue however I would only like to turn it this colour for 4 seconds.

How do I do this?

I've Googled around but I couldn't find anything regarding changing css for a given time frame.

Also, a fading out/in from/to the previous settings would be a nice touch.

• javascript
• jquery
• css

3 Answers 3

If you want it to only appear blue for 4 seconds you could do:

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

You need jQuery UI to .animate(), otherwise you can just use .css().

You have to use the timer feature:

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

The second argument is a count in milliseconds of how long you'd like to wait before the first argument (a function) is called.

There's no built-in ability to say "go back to what it was before"; you'll have to remember the old value in your own code.

If you do not want to use the jQuery UI plugin (perhaps due to its size) then you could do the animating manually.

See the following code working in a 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);
});​