14

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>

2 Answers2

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

Will work perfectly.

Mooseman
  • 18,763
  • 14
  • 70
  • 93
  • 1
    That's nice jQuery elegance. – jmbertucci Jan 31 '13 at 22:36
  • @Mooseman Still not showing anything. I updated my question with the HTML. I am actually hidding the div with css `display:none;` –  Jan 31 '13 at 22:48
  • 2
    `.fadeIn(500);` will override `display: none`. I just noticed that your HTML uses a classname, and not an ID. I updated my answer to reflect that. – Mooseman Jan 31 '13 at 23:05
4

Ive never seen your show method written like that. Try altering it into use the jquery method fadeIn:

<script>
$(function() {
  $("#contentPost").delay(2000).fadeIn(500);
});
</script>

The show method does not accept any arguments and won't work as you want it to.

Undefined
  • 11,234
  • 5
  • 37
  • 62
  • Still not showing anything. I updated my question with the HTML. I am actually hidding the div with css `display:none;`. –  Jan 31 '13 at 22:44
  • @Undefined show() *can* take options, according to the jQuery 1.0 docs page (https://api.jquery.com/show/). – Zonker.in.Geneva Aug 21 '17 at 15:55