延迟显示和淡化背景颜色的文本

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