Скрыть div, не показывая его сначала

Question

есть ли способ скрыть div, не загружая его сначала, когда я хочу скрыть div, это первое шоу для примерно 0,5 сек, а затем скрыть его, а затем сделать анимацию ниже, это выглядит очень уродливый, есть ли способ избежать этого, или я использую js неправильным способом?

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

Answer 1

Использование CSS

.errors, .errors1 { 
    display: none; 
} 

И вы можете удалить из JS

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

JS Fiddle Demo

Answer 2

Добавьте следующее правило в ваш CSS документа:

.errors { 
    display: none; 
} 

Answer 3

сделать сокрытие с помощью css. Затем покажите, когда это необходимо.

CSS:

.errors { 
    display: none; 
} 

JS (для отображения DIV):

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

INLINE СТИЛЬ (не рекомендуется)

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

Answer 4

Это хорошо ответили, что вы должны определить div будет «скрыт» в CSS. Просто дополнительное объяснение, почему вы должны это делать.

Это связано с тем, как производится css. Как было отмечено в другом посте здесь на SO:

Ссылка: How is CSS applied by the browser, and are repaints affected by it?

Браузер читает HTML-теги в виде потока, и применяет какие правила он может элементам он видел до сих пор.

Таким образом, это означает, что стили css применяются, как только браузер знает, что этот элемент существует. Таким образом, ваш оператор display: none будет отображаться мгновенно, и вы даже не сможете увидеть div перед ним.

Js, с другой стороны, работает по-разному. Хотя он может выполнять некоторые действия до, страница загружается, ее взаимодействия с элементами, такие как div, должны ожидание завершения страницы. Вот почему вы должны определить:

$(document).ready(function() { 

Он сообщает браузеру, чтобы сделать этот документ первым, а затем, когда она ready, он может выполнять функции JavaScript ... Таким образом, именно поэтому вы можете увидеть div на небольшой момент, а затем JS скрывает его.

Так что да, для того, чтобы скрыть это с самого начала, вы должны пойти с CSS:

.errors, .errors1 { 
    display: none; 
}