javascript - Change A Div's CSS For A Certain Time - Stack Overflow

admin管理员组

文章数量:1389779

$("#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

Share Improve this question Follow edited Dec 31, 2012 at 22:18 JoseBazBaz asked Dec 31, 2012 at 22:10 JoseBazBazJoseBazBaz 1,44544 gold badges1515 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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);
});​

本文标签： javascriptChange A Div39s CSS For A Certain TimeStack Overflow