Reputation: 125
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.
Upvotes: 0
Views: 339
Reputation: 10879
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
Upvotes: 1