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.)