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

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

1 个答案: