Задержка отображения текста и исчезновение в цвет фона

Question

Я хочу добавить текст в текст при загрузке страницы, а также медленно исчезать цвет фона.

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

Вот что у меня есть для jQuery сейчас:

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

В нем есть функция щелчка.

Как мне настроить задержку и цвет фона?

РЕДАКТИРОВАТЬ: Я бы хотел, чтобы он постепенно появлялся, затем медленно ("не раздражающе") мигал блок div 2 или 3 раза, а затем оставался на месте. Пользователь не пропустит предупреждение.

Answer 1

Вы можете использовать setTimeout для вызова функции fadeIn по истечении заданного промежутка времени после загрузки документа, fadeIn принимает параметр обратного вызова, поэтому вы можете установить другую функцию для анимации цвета фона.

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

Это должно делать то, что вы хотите. Хотя я не проверял это.

Вам также понадобится плагин jQuery Color.

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

РЕДАКТИРОВАТЬ: это то же самое, но с добавленной пульсирующей анимацией.

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