Delay text from displaying and fading in the background-color

Question

I want to fade in text when loading a page, w/ the background-color slowly fading in as well.

<div id="alert-box">
 <p>This is the alert box, this message will display 5 seconds after page is loaded, with   the background-color fading in.</p>
</div>

Here is what I have for the jQuery for now:

$(document.body).click(function () {
   $("div:hidden:first").fadeIn("slow");
});

It has the click function in it.

How would I go about setting a delay and also the background-color to fade in?

EDIT: I would like it to fade in, then slowly ("non-annoyingly") flash the div block 2 or 3 times, then stays still. The user won't miss the alert then.

Answer 1

You can use setTimeout to call the fadeIn function after a specified amount of time after the document has loaded, fadeIn accepts a callback parameter, so you can set another function to animate the background color.

$(document).ready(function() { 
    setTimeout(function() { $('#alert-box').fadeIn('slow', 
                 function() { $('#alert-box').animate(
                                 {backgroundColor: "rgb(255,00,00)"},1500); 
                 })}, 
     5000)});

That should do what you want.Though I haven't verified it.

You'll also need the jQuery Color plugin.

http://plugins.jquery.com/project/color

EDIT: This is the same things but with pulsing animation added in.

$(document).ready(function() { 
    setTimeout(function() { $('#alert-box').fadeIn('slow', 
                 function() { $('#alert-box').animate({backgroundColor: "rgb(255,0,0)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,255,255)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,0,0)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,255,255)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,0,0)"}, {duration: "slow"});; 
                 })}, 5000)});