Hide div without showing it first

Question

is there a way to hide div without loading it first, when i want to hide div it first show for like 0.5sec and then hide it self, and then do the animation below, it looks very ugly, is there a way to avoid this, or am I using js the wrong way?

$( document ).ready(function() {
    $('.errors').hide(1);
    $('.errors1').hide(1);
});
$( document ).ready(function() {
    $('.errors').animate({width: 'show'},1000);
    $('.errors1').animate({width: 'show'},1000);
});

Dan · Accepted Answer · 2014-09-10T15:52:27.597

4

Use CSS

.errors, .errors1 {
    display: none;
}

And you can remove from your JS

$( document ).ready(function() {
    $('.errors').hide(1);
    $('.errors1').hide(1);
});

JS Fiddle Demo

edited Sep 10 '14 at 15:52

answered Sep 10 '14 at 15:44

Dan

9,391
5
41
73

score 3 · Answer 2 · edited May 23 '17 at 12:05

It's been well answered that you have to define the div to be "hidden" on the CSS. Just an aditional explanation on why you have to do that.

It has to do with how is css rendered. As pointed out in another post here on SO:

Reference: How is CSS applied by the browser, and are repaints affected by it?

The browser reads the HTML tags as a stream, and applies what rules it can to the elements it has seen so far.

So, it means that css styles are applied as soon as the browser knows that the element exists. So your display: none statement will be rendered instantly, and you won't even be able to see the div before it.

Js, on the other hand, works differently. While it can perform some actions before the page is loaded, its interactions with elements, such as a div, must wait for the page render to be complete. That is why you have to define:

$( document ).ready(function() {

It tells the browser to render the document first, and then, when it is ready, it can perform the javascript functions... So, that is why you can see the div for a small moment, and then JS hides it.

So yes, in order to hide it from the start, you have to go with CSS:

.errors, .errors1 {
    display: none;
}

score 1 · Answer 3 · answered Sep 10 '14 at 15:44

1

Add the following rule to your css document:

.errors {
    display: none;
}

answered Sep 10 '14 at 15:44

Mardoxx

4,372
7
41
67

score 0 · Answer 4 · answered Sep 10 '14 at 15:47

do the hiding with css. Then show when needed.

CSS:

.errors {
    display: none;
}

JS (to display the div):

$( document ).ready(function() {
    $(".errors").fadeIn(200);
});

INLINE STYLE (not recommended)

<div class="errors" style="display:none;">ERROR MSG</div>

Hide div without showing it first

4 Answers4