Show div after 2 seconds of page load

Question

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>

Answer 1

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

Will work perfectly.

Answer 2

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.