Скрытие элемента с сохранением пространства в jQuery

Быстрый ответ

Для скрытия элемента без изменения его положения в макете страницы рекомендуется использовать CSS-свойство visibility: hidden;. Этот подход сохраняет пространственные габариты элемента и не влияет на структуру макета.

Пример кода:

.invisible {
    visibility: hidden; /* Элемент скрыт, но занимает своё место. */
}

<div class="invisible">Меня не видно, но я занимаю своё место.</div>

Для динамического управления видимостью элементов в jQuery используйте следующий код:

// Скрытие элемента
$('#yourElement').css('visibility', 'hidden');

// Отображение элемента
$('#yourElement').css('visibility', 'visible');

Визуализация

Рассмотрим ряд одинаковых объектов, расположенных в ряд:

Ряд: [🍎,🍎,🍎,🍎]

Применение display: none; аналогично удалению одного из объектов, в результате чего образуется пустое пространство:

.apple {
  display: none; /* До свидания, яблоко! */
}

Ряд: [🍎,🍎, ,🍎]

А вариант .css('visibility', 'hidden') делает объект невидимым, но сохраняет его на прежнем месте:

$('.apple').css('visibility', 'hidden'); /* Невидимое, но присутствующее яблоко. */

Ряд: [🍎,🍎,🍬,🍎]

Тут невидимая конфета (🍬) символизирует невидимое яблоко, место которого сохранено.

Плавные переходы — эффекты затухания

Для создания эффекта плавного исчезновения объекта используйте метод fadeTo(). Он изменяет прозрачность объекта до заданного уровня, при этом объект продолжает занимать своё место в пространстве страницы.

// Плавное исчезновение объекта с использованием fadeTo()
$('.apple').fadeTo('slow', 0, function() {
    $(this).css('visibility', 'hidden'); /* Теперь попробуй меня найти. */
});

Слои взаимодействия — реакция на действия пользователя

Необходимо учесть влияние на интерактивность элемента. visibility: hidden; блокирует все события мыши, в отличие от opacity: 0;, которое сохраняет возможность взаимодействия пользователя с полностью прозрачным объектом. То, что невидимо, не всегда недоступно!

Сохранение пространства или освобождение места

В отличие от visibility: hidden, сохраняющего пространство занятое элементами, метод hide() делает элемент невидимым и освобождает занятое им пространство. Оба подхода следует применять с учетом поставленной задачи.

// Удаление элемента из вида
$('#yourElement').hide(); /* Элемент исчез, да и место освободил! */

// Восстановление видимости элемента
$('#yourElement').show(); /* И я вновь появляюсь на свет! */

Выбор подходящего решения — Сценарии применения

Переключение всплывающих подсказок

Для подсказок, которые должны плавно появляться и исчезать, будет оптимально использование visibility: hidden — оно обеспечивает комфортное взаимодействие пользователя с интерфейсом.

Подробнее об этом расскажет наш спикер на видео

Заглушки для ленивой загрузки

Используйте visibility:hidden для резервирования места под компонент, который будет загружен позже. Это позволит избежать смещения элементов макета.

Стабильность форм

Когда в формах нужно скрыть элементы без изменения общего расположения элементов, лучшим решением будет visibility: hidden.

Плавные переходные эффекты

Для плавного изменения видимости неактивных элементов объедините свойство visibility и изменение прозрачности.

Запомните

• Доступность: Скринридеры способны воспроизводить содержимое элементов, даже если применено свойство visibility: hidden.
• Взаимодействие с элементами: Невозможно установить фокус на элементы со свойством visibility: hidden, что может повлиять на удобство использования сайта.
• Ресурсы и производительность: Поскольку элементы с display: none не участвуют в отрисовке страницы, они могут снижать загрузку памяти по сравнению с visibility: hidden или opacity: 0.

Полезные материалы

1. .hide() | jQuery API Documentation — Инструкция по методу $.hide() в jQuery с примерами использования.
2. visibility | CSS-Tricks — Сравнение свойств visibility: hidden; и display: none;.
3. css – Какова разница между visibility:hidden и display:none? – Stack Overflow — Обсуждение методов скрытия элементов с сохранением их положения на странице.
4. opacity – CSS: Cascading Style Sheets | MDN — Описание свойства opacity в CSS.
5. jQuery Effects – Hide and Show — Руководство по jQuery Effects: эффектам скрытия и показа.
6. The CSS Box Model | CSS-Tricks — Раскрытие темы распределения пространства в макетах веб-страниц.
7. You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy — Smashing Magazine — О значимости адаптивного дизайна и его влиянии на скрытые элементы.