JQuery .hide () без потери позиционирования?

Question

У меня есть следующий простой скрипт, который заставляет элемент моей веб-страницы исчезать при загрузке страницы.

$('#box1').hide();
$('#box1').delay(300).fadeIn(500);

У меня проблема в том, что когда скрыто, #box1 не занимает места (из-за того, что его класс видим: нет). Как я могу скрыть #box1, чтобы он не нарушал другие всплывающие элементы, которые зависят от его присутствия?

Answer 1

Не знаю, возможно ли это в вашем случае, но вы можете просто установить непрозрачность элемента,

$('#box1').css('opacity':0);

тогда

$('#box1').delay(300).fadeTo(1,500);

Answer 2

Положите #box1 в обертку и задайте ей ширину и высоту. Теперь, когда вы прячете # box1, оболочка остается пустой.

<div id="#wrapper">
  <div id="box1"></div>
</div>

#wrapper{
..
}

Answer 3

Этот код работает без потери позиции и не разрушается.

(скрыть)

$("#name").animate({opacity:0});

(шоу)

$("#name").animate({opacity:1});

Answer 4

JQuery скрыто, равнозначно установке дисплея на none.В настоящее время это то же самое, что и:

$('#box1').css({"display":"none"});    

Вместо этого попробуйте сначала установить класс css для объекта, чтобы его видимость отсутствовала.Что-то вроде:

$('#box1').css({"visibility":"hidden"});

Тогда

$('#box1').delay(300).fadeIn(500);