使用jQuery在5秒钟内显示一个div

Question

我想在我的网站上，在5秒内淡入一个div。此外，我不想使用CSS的Display:none来隐藏这个div，因为这个div非常重要，如果用户没有启用JS，那么这个div将永远被隐藏。所以你们能告诉我如何在网站加载时隐藏这个div，并在5秒后让它可见吗？非常感谢。

<div id="lead_form"></div>

- nasty

---

您的要求与描述相矛盾。实际上，您要求在完全不使用JavaScript的情况下完成此操作。请记住，当禁用JavaScript时，jQuery也将被禁用。 - sakhunzai

嗨。我不是说不使用JavaScript。我是说不使用CSS。 - nasty

请编辑您的描述以澄清“如果用户未启用JS...” - sakhunzai

Answer 1

setTimeout(function(){
   $('#lead_form').show();// or fade, css display however you'd like.
}, 5000);

- Glorious Kale

---

@Uds @sushanth reddy 啊..他不想使用 display:none。在 DOM 准备就绪时添加 $('#lead_form').hide(0); 以立即隐藏元素，然后使用上面提供的代码。 - Ohgodwhy

是的，那可能会奏效。 但更准确的做法是这样使用：<div id="lead_form" class="hiden"></div>（display: none） 并使用jQuery将其更改为 <div id="lead_form" class="shown"></div>（display: block） - Glorious Kale

Answer 2

如果你想创建一个不显眼的特性，应该让div默认可见。

当页面正确加载后，首先要做的是使用jQuery隐藏DIV，然后运行一个动画在5秒钟内显示它。

通过这种方式，如果没有激活JS，DIV已经可以使用了。

$(document).ready(function() {

    // Hide the div
    $("#lead_form").hide();

    // Show the div in 5s
    $("#lead_form").delay(5000).fadeIn(500);

});

- MatRt

Answer 3

使用 noscript 标签，并将 div 放置在其中，在浏览器禁用 Java Script 时显示。

<noscript>
    <div id="lead_form"></div>
</noscript>

使用以下代码来在启用了JavaScript的浏览器中进行五秒钟的淡入效果：

$("#lead_form").fadeIn(5000);

- Dimuthu

Answer 4

试一下这个

 $('#lead_form').hide("fast",function(){
    $("#lead_form").show(5000);
    });

- StaticVariable

Answer 5

以下代码对我有效，如果你想要在几秒钟内显示 Div...

$('#divInfo').fadeIn("fast", function(){        
        $("#divInfo").fadeOut(4000);
    });

- user007

Answer 6

如果JS被禁用，你不想永远隐藏div，那么你应该在文档准备好后隐藏它，然后在5秒后再显示出来。这里有一个fiddle演示了这种行为。然而，如果这个div很重要，在没有JS的情况下始终显示出来，那么我不确定你是否真的想要先隐藏它，然后再显示出来。

- Bill Hayden

---

我正在尝试通过在页面加载后淡入来吸引注意力。这是一个小技巧。 - nasty

Answer 7

首先，在将 $('#load_form') 添加到页面之前，您应该隐藏它：$('#load_form').hide()，然后您应该使用此函数显示它：.fadeIn( [duration] [, callback] )，您必须设置 duration 为 5000。

- fatima Na