CODEWITHSUNDEEP
javascriptjquery
Edin Sita
Edin Sita

Reputation: 97

Hide div without showing it first

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);
});

Upvotes: 2

Views: 179

Answers (4)

LcSalazar
LcSalazar

Reputation: 16841

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;
}

Upvotes: 3

Dan
Dan

Reputation: 9478

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

Upvotes: 4

Ole Spaarmann
Ole Spaarmann

Reputation: 16761

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>

Upvotes: 0

Mardoxx
Mardoxx

Reputation: 4482

Add the following rule to your css document:

.errors {
    display: none;
}

Upvotes: 1

Related Questions