CODEWITHSUNDEEP
javascriptjquerycssfrontend
danedelions_swift
danedelions_swift

Reputation: 125

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

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

Answers (2)

asimshahiddIT
asimshahiddIT

Reputation: 330

its very simple

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

JS Fiddle

Upvotes: 0

Sarah Groß
Sarah Groß

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

Related Questions