jQuery: как проверить, скрыт ли элемент? (разбор для новичков)

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Введение: почему этот вопрос волнует каждого фронтенд-разработчика

Представьте ситуацию: вы пишете интерактивную страницу с выпадающим меню, модальным окном или аккордеоном. Пользователь кликает по кнопке, и блок должен плавно появиться или исчезнуть. Но что, если вы случайно попытаетесь анимировать уже скрытый элемент? Или, наоборот, покажете то, что и так видно? Результат — баги, дергающийся интерфейс и разочарованные пользователи.

Именно поэтому вопрос "How do I check if an element is hidden in jQuery?" — один из самых популярных на Stack Overflow. На него дано более тысячи ответов, и это не случайно. Умение правильно определить видимость элемента — базовый навык, который сэкономит вам часы отладки.

В этой статье мы подробно разберем, как с помощью jQuery проверить, скрыт ли элемент. Вы узнаете о подводных камнях, различиях между display:none и visibility:hidden, и научитесь писать надежный код. Поехали!

Метод .is(':hidden') — ваш главный инструмент

Самый простой и распространенный способ проверить, скрыт ли элемент — использовать метод .is() с псевдоселектором :hidden. jQuery предоставляет его из коробки.

Как это работает

Селектор :hidden в jQuery выбирает элементы, которые:

Имеют CSS-свойство display: none;
Являются элементами типа <input type="hidden">;
Имеют ширину и высоту, равные нулю (например, width: 0; height: 0);
Являются потомками скрытого родителя (наследуют невидимость).

Вот как выглядит простейшая проверка:

// Проверяем, скрыт ли элемент с id="myDiv"
if ($('#myDiv').is(':hidden')) {
    console.log('Элемент скрыт!');
} else {
    console.log('Элемент видим.');
}

Проверка на видимость через .is(':visible')

Для обратной логики используйте селектор :visible:

if ($('#myDiv').is(':visible')) {
    console.log('Элемент видим на странице.');
}

Оба подхода работают быстро и интуитивно понятны. Но есть нюанс: что, если элемент скрыт с помощью visibility: hidden или opacity: 0? jQuery считает такие элементы видимыми, что часто становится сюрпризом для новичков.

Подводные камни: visibility: hidden и opacity: 0

Многие разработчики ошибочно полагают, что :hidden реагирует на любые способы скрытия элемента. Это не так.

Пример с visibility: hidden

Свойство visibility: hidden делает элемент невидимым, но он по-прежнему занимает место на странице. jQuery считает такой элемент видимым, так как его размеры не равны нулю.

<div id="myBox" style="visibility: hidden;">Я невидим, но занимаю место</div>

<script>
console.log( $('#myBox').is(':hidden') );  // false
console.log( $('#myBox').is(':visible') ); // true
</script>

Пример с opacity: 0

То же самое касается прозрачности:

<div id="transparentBox" style="opacity: 0;">Прозрачный, но видим для jQuery</div>

<script>
console.log( $('#transparentBox').is(':hidden') );  // false
</script>

Если ваш код использует fadeIn()/fadeOut() или анимацию прозрачности, стандартная проверка :hidden вас подведет. Для таких случаев нужно проверять конкретное CSS-свойство.

Как проверить visibility: hidden или opacity: 0

Когда вам нужно узнать, скрыт ли элемент именно с помощью этих свойств, используйте .css():

Проверка visibility

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');
if (isVisibilityHidden) {
    console.log('Элемент скрыт через visibility');
}

Проверка opacity

var isOpacityZero = ($('#myElement').css('opacity') == 0);
if (isOpacityZero) {
    console.log('Элемент полностью прозрачен');
}

Этот подход универсален и работает даже если элемент скрыт через встроенные стили или CSS-классы.

Проверка, скрыт ли элемент через display: none

Если вы точно знаете, что скрываете элемент только через display: none, можете проверить напрямую:

if ($('#myElement').css('display') === 'none') {
    // делаем что-то
}

Однако метод .is(':hidden') в этом случае предпочтительнее, так как он учитывает и другие факторы (нулевые размеры, скрытые родители).

Как проверить, скрыт ли родительский элемент

Часто элемент может быть видимым сам по себе, но скрыт, потому что его родитель имеет display: none. Стандартный :hidden учитывает это:

<div id="parent" style="display: none;">
    <div id="child">Я видим, но родитель скрыт</div>
</div>

<script>
console.log( $('#child').is(':hidden') ); // true — родитель скрыт
</script>

Это очень удобно: вам не нужно писать рекурсивную проверку всех предков.

Практический пример: анимация с проверкой

Давайте соберем все вместе и напишем полезный код. Предположим, у нас есть кнопка, которая переключает видимость блока. Мы хотим избежать двойного нажатия во время анимации:

<button id="toggleBtn">Показать/Скрыть</button>
<div id="content" style="display: none;">
    <p>Скрытый контент</p>
</div>

<script>
$('#toggleBtn').on('click', function() {
    var $content = $('#content');
    
    // Проверяем, не анимируется ли элемент прямо сейчас
    if ($content.is(':animated')) {
        return; // Игнорируем клик во время анимации
    }
    
    if ($content.is(':hidden')) {
        $content.slideDown();
    } else {
        $content.slideUp();
    }
});
</script>

Здесь мы использовали .is(':hidden') для определения текущего состояния и .is(':animated') для защиты от повторных кликов. Это стандартная практика в production-коде.