CODEWITHSUNDEEP
javascriptjquery
user2329017
user2329017

Reputation: 55

Show div after 10 seconds page load

I have this script, I have been able to make it fadeOut within 20 seconds, but I would like that it takes 10 seconds to display after page load, what should I modify?

jQuery("#messageBox").hide().slideDown();
 setTimeout(function(){
  jQuery("#messageBox").fadeOut();        
 }, 20000);

Thanks in advance

Upvotes: 2

Views: 1634

Answers (2)

Alok Mali
Alok Mali

Reputation: 2881

You are going in right direction. Just like you are applying fadeOut.

You need to show your div after 10 seconds with the help of setTimeout. But you have to default hide this div on page load.

See example below -

jQuery("#messageBox").hide();
setTimeout(function(){
  jQuery("#messageBox").slideDown();       
 }, 10000);
 setTimeout(function(){
  jQuery("#messageBox").fadeOut();        
 }, 20000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageBox">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

To have content fade in after 10 seconds you need to hide everything on page load using CSS, to avoid the FOUC problem, then call fadeIn(). Something like this:

setTimeout(function() {
  $('#container').fadeIn();        
}, 10000);
#container { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <h1>Lorem ipsum</h1>
</div>

Upvotes: 3

Related Questions