background color change with jQuery

I've seen it done, but can't really find how to do it... I'd like to have one background in an alert message on page load and then, after couple of seconds, slowly fade it into white. Just the background -- the开发者_StackOverflow社区 message stays.

You will want to look at the color plugin or reference jQuery UI to do the color animations.

Quick example:

body{
    background-color:red;
}

$("body").animate({
    backgroundColor : "white"
}, 5000);

jsfiddle

• DEMO: http://so.devilmaycode.it/background-color-change-with-jquery

i could immagine something like this:

$(function() {
    $('.modal').fadeIn(500,function() {
        $(this).animate({
            'background-color': "#FFF"
        },
        1000,function() {
            $(this).fadeOut(500)
        });
    });
});

#fade{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}

#light{display:none;position:absolute;top:35%;left:35%;width:300px;height:50px;padding:16px;background-color:white;z-index:1002;overflow:auto;color:#333}

<div id="light" class="modal">Loading...</div>
<div id="fade" class="modal"></div>