Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show div after 2 seconds of page load

I am currently trying to show a div 2 seconds after the page is loaded. I can successfully do the reverse by hiding the div two seconds after the page loads. The issue is that nothing occurs and the div stays hidden. How can I properly show a div after two seconds of page load? Extra: mean while the two seconds are running show an ajax loading gif and then fade in the div

<script type = "text/javascript">  
$(window).load(function() {
    setTimeout(function() {
        $("#contentPost").show('fadeIn', {}, 500)
    }, 2000);
});
</script>

html/css

<style>
.contentPost { display:none;}
</style>

<div class="contentPost">
 <h2>Hi there</h2>
</div>
like image 208
CodingWonders90 Avatar asked Jan 31 '13 22:01

CodingWonders90


People also ask

How do I show divs after 5 seconds?

Use noscript tag and put div in it to display when java script is disabled in browser. Show activity on this post. Show activity on this post. The below code worked for me, if you are intending to show the Div for a few seconds...

How do you delay a Div load?

$(document). ready(function() { $('#PriceBox'). delay(8000). fadeIn(400); });

How do you load a page after 5 seconds?

Use the setTimeout() function in JavaScript to load a webpage after some interval. This function waits for some seconds and then loads the web page.


1 Answers

$(document).ready(function() {
    $(".contentPost").delay(2000).fadeIn(500);
});

Will work perfectly.

like image 190
Mooseman Avatar answered Nov 15 '22 17:11

Mooseman