jQuery: Hide div when page is loading and show div with transition

Question

I'm currently working on a project and I'm having problems with my hero section text jQuery. The scenario is when the page is loading, the text should not be visible but when it's loaded, the text will show.

Here is my CSS code:

.hero_description{
  visibility: hidden;
}

and here is my jQuery:

jQuery(function($) {
    jQuery('.hero_description').show();
},2000);

The problem is, it's not showing the proper transition as it renders first at the top, and once its other CSS styles are rendered it goes to its proper place in the middle.

Answer 1

If you want it to show with a transition, you'll need to use fadeIn() instead of show() . Also make sure to hide() the element first to prevent any flickering.

 jQuery('.hero_description').hide().fadeIn(2000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> content above <div class="hero_description">DESCRIPTION HERE</div> content below

Answer 2

its very simple

$('.hero_description').fadeIn(2000);

JS Fiddle