Show div after 10 seconds page load

user_2329017 0
Viewed 417

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

jquery javascript
2 Answers

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>

user_5194130

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>

user_78438280
Related