Retarder l'affichage et la décoloration du texte dans la couleur d'arrière-plan

Question

Je souhaite fondre du texte lors du chargement d'une page, sans que la couleur de fond ne s'affaiblisse également.

<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> 

Voici ce que je le jQuery pour l'instant:

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

Il a la fonction de clic en elle.

Comment est-ce que je devrais régler le retard et aussi la couleur de fond pour fondre dedans?

EDIT: Je voudrais qu'il se fanent, puis lentement ("non-agaçant") clignoter le bloc div 2 ou 3 fois, puis reste immobile. L'utilisateur ne manquera pas l'alerte alors.

Answer 1

Vous pouvez utiliser setTimeout pour appeler la fonction fadeIn après un certain temps après le chargement du document, fadeIn accepte un paramètre de rappel, vous pouvez donc définir une autre fonction pour animer la couleur d'arrière-plan.

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

Cela devrait faire ce que vous voulez. Bien que je ne l'ai pas vérifié.

Vous aurez également besoin du plugin jQuery Color.

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

EDIT: Ceci est la même chose, mais avec animation impuls ajouté dans

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