Use jQuery to show a div in 5 seconds

Question

I want to fade in a div on my website in 5 seconds. Also, I dont want to use css Display:none to hide the div, because this div is very important and I'm thinking if the user doesnt have JS enabled, the div will be hidden forever. So can you guys please tell me how to hide the div on website load and make it visible in 5 seconds? Thanks heaps.

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

you requirements contradict with your description. You are actually asking to do this without using Javascript at all. Remember when javascript is disabled , jquery will also be disabled. — sakhunzai, Oct 04 '12 at 05:58
Hi. No im not saying without using javascript. Im saying without using CSS — nasty, Oct 04 '12 at 05:59
please edit your description to clearify "if the user doesnt have JS enabled..." — sakhunzai, Oct 04 '12 at 06:01

score 18 · Accepted Answer · edited Feb 16 '20 at 06:35

18

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

edited Feb 16 '20 at 06:35

Wajih

4,227
2
25
40

answered Oct 04 '12 at 05:52

Glorious Kale

1,273
15
25

2

@Uds @sushanth reddy Ahh..he doesn't want to use `display:none`. add `$('#lead_form').hide(0);` to instantly hide the element on DOM ready, then use the code provided above. – Ohgodwhy Oct 04 '12 at 06:04
Yea, that could do the trick. But it's more accurate to use it like this:
(display: none) and use jQuery to change it to
(display: block) – Glorious Kale Oct 04 '12 at 11:18

score 6 · Answer 2 · answered Oct 04 '12 at 06:17

If you want to make a unobstrusive feature, you should let the div visible by default.

When the page is correctly loaded, the first task to do is to hide the DIV with jQuery, and then, run an animation to show it in 5s.

By doing this way, if there is no JS activated, the DIV is already available.

$(document).ready(function() {

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

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

});

score 2 · Answer 3 · answered Oct 04 '12 at 06:21

Use noscript tag and put div in it to display when java script is disabled in browser.

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

Use below code to fade in with in five seconds for java script enabled browsers

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

score 1 · Answer 4 · answered Oct 04 '12 at 06:12

1

Try this

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

answered Oct 04 '12 at 06:12

StaticVariable

5,253
4
23
45

score 1 · Answer 5 · answered Mar 13 '14 at 16:51

1

The below code worked for me, if you are intending to show the Div for a few seconds...

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

answered Mar 13 '14 at 16:51

user007

1,504
2
18
51

score 0 · Answer 6 · answered Oct 04 '12 at 06:05

0

As you don't want to hide the div forever if JS is disabled, you'd want to hide it on doc ready and then show it again in 5 seconds. Here's a fiddle that demonstrates the behavior. However, if the div is important enough to be shown all the time with JS off, then I'm not sure if you'd really want to hide it and then show it in the first place.

answered Oct 04 '12 at 06:05

Bill Hayden

1,086
7
6

Im trying to grab the attention by fading it in after page load. Its a little trick. – nasty Oct 04 '12 at 06:09

score 0 · Answer 7 · answered Oct 04 '12 at 06:28

0

first you should hide $('#load_form') before appending to page : $('#load_form').hide() then you should show it with this function .fadeIn( [duration] [, callback] ) you must set duration 5000.

answered Oct 04 '12 at 06:28

fatima Na

72
1
12

Use jQuery to show a div in 5 seconds

7 Answers7

Linked