JQuery скрыть элемент при сохранении его пространства в макете страницы

Есть ли способ в jQuery, где я могу скрыть элемент, но не изменить DOM, когда он скрыт? Я скрываю определенный элемент, но когда он скрыт, элементы под ним поднимаются вверх. Я не хочу, чтобы это произошло. Я хочу, чтобы пространство оставалось неизменным, но элемент, который будет отображаться/скрываться по желанию.

Могу ли я это сделать?

Ответ 1

Вместо hide() используйте:

css('visibility','hidden')

hide() устанавливает стиль display в none, который полностью удаляет элемент из потока документа и заставляет его не занимать место.

visibility:hidden сохраняет пространство как есть.

Ответ 2

Попробуйте установить visibility на hidden:

$("#id").css("visibility", "hidden");

Ответ 3

display: none; выведет его из потока содержимого, чтобы вы увидели, как ваш другой контент перемещается в оставшееся пустое пространство. (display: block; возвращает его обратно в поток, толкающий все в сторону.)

visibility: hidden; будет держать его в потоке содержимого, занимая место, но просто сделает его невидимым. (visibility: visible; снова откроет его.)

Вы хотите использовать visibility, если хотите, чтобы поток содержимого оставался неизменным.

Ответ 4

в другом ответе отмечается, что jQuery fadeTo не устанавливает display:none при завершении, поэтому может также предоставить решение здесь, а не использовать fadeOut, например:

jQuery, скрыть div без нарушения остальной части страницы

Ответ 5

Я использовал opacity:0, прежде чем увидел трюк visibility:hidden.

Я не знаю никаких преимуществ, на самом деле это, вероятно, медленнее для рендеринга. Но в любом случае это альтернатива.

Одно существенное различие заключается в том, что вы не можете взаимодействовать (например, фокус или клик) с элементом с visibility:hidden, но пользователь может взаимодействовать с элементом с opacity:0. Вероятно, это недостаток для скрытого элемента. (Указывается DeadPassive.)