Delay text from displaying and fading in the background-color

By : Brad
Source: Stackoverflow.com
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.

By : Brad


Answers

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


From the documentation for -Wconversion:

Warnings about conversions between signed and unsigned integers are disabled by default in C++ unless -Wsign-conversion is explicitly enabled.

Seems that you'll need a sufficiently new version of GCC, too. I have version 4.0.1, and it doesn't recognize -Wsign-conversion.



that's when you ship software saying "well, it probably works..." ;-)

EDIT: it's a research topic where machine learning and statistical clustering are used to try to find patterns in programs that are good predictors of bugs, to identify where more bugs are likely to hide.



This video can help you solving your question :)
By: admin