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.

When is this function being called? for load you can use "onready" or "onload". for transition add transition styling to your css. then when you show it will have effects — Evik Ghazarian
– Evik Ghazarian, Commented Oct 22, 2019 at 15:52

Sarah Groß · Accepted Answer · 2019-10-22 15:57:27Z

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

answered Oct 22, 2019 at 15:57

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Markus Dresch · Accepted Answer · 2019-10-22 16:57:39Z

0

its very simple

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

JS Fiddle

edited Oct 22, 2019 at 16:57

Markus Dresch

5,5853 gold badges22 silver badges43 bronze badges

answered Oct 22, 2019 at 16:00

asimshahiddIT

3302 silver badges5 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related