CODEWITHSUNDEEP
jquerycss
santa
santa

Reputation: 12512

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 message stays.

Upvotes: 2

Views: 4945

Answers (2)

Luca Filosofi
Luca Filosofi

Reputation: 31173

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>

Upvotes: 2

Mark Coleman
Mark Coleman

Reputation: 40863

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

Upvotes: 4

Related Questions