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>

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

});

Answer 5

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

Answer 6

Try this

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