CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zach Smith
Zach Smith

Reputation: 5674

jQuery hide() Then show() a <div> Isn't Completely Hiding the <div> on Page Load

goal: when page loads, slowly show a div that is not seen on page load.

current code:

$('h1.page_heading_title').hide().fadeIn(666);

issue: when using the above code, the div fist shows on page load, then hides, then slowly fades in. this is giving users a glitchy effect.

thoughts: is there something i am missing here to completely hide the div and then fadein()? the next solution i can think of is edit the div to display:none, then use addClass() to add a div class that uses css animations to complete my task. my only worry is that sure seems like a lot of code to do something that in theory jquery should be doing already with .hide().fadIn().

any help would be greatly appreciated.

Upvotes: 0

Views: 443

Answers (3)

Zackary Murphy
Zackary Murphy

Reputation: 411

You should be able to simply set display:none as the style of the element, then use fade in.

Example:

$(function() {
  $('h1.page_heading_title').fadeIn(666)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="page_heading_title" style="display:none">My Header</h1>

Upvotes: 0

Dij
Dij

Reputation: 9808

you can just use display:none as style for div and then fadeIn() from js. no need to use addClass(), something like this:

$('div').fadeIn(666);
div{
 display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>A div</div>

Upvotes: 1

Tyler Roper
Tyler Roper

Reputation: 21672

Just sounds like your page is taking a bit to load. Assuming you have this in a $(document).ready(), it won't run your JavaScript until the DOM has finished rendering.

You can ensure that the <h1> is hidden before loading by setting it to display: none;, either using inline-styling or CSS:

$('h1.page_heading_title').fadeIn(666);
h1.page_heading_title {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="page_heading_title">This is a heading.</h1>

Upvotes: 2

Related Questions