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></div>7 Answers
setTimeout(function(){ $('#lead_form').show();// or fade, css display however you'd like.
}, 5000);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);
});Use noscript tag and put div in it to display when java script is disabled in browser.
<noscript> <div></div>
</noscript>Use below code to fade in with in five seconds for java script enabled browsers
$("#lead_form").fadeIn(5000);Try this
$('#lead_form').hide("fast",function(){ $("#lead_form").show(5000); });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); });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.
1first 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.
