Применение jQuery для отображения элемента с visibility:hidden

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

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

$("#yourDivId").css("visibility", "visible");

Метод .show() изменяет свойство display, а не visibility. Поэтому если элемент скрыт при помощи visibility, этот метод не сделает его видимым.

Расширенное решение: Исследуем возможности управления видимостью

Плавное появление с прозрачностью: из незаметности

В разработке сложных пользовательских интерфейсов часто отдают предпочтение плавным и ненавязчивым переходам. Для реализации постепенного изменения прозрачности подойдет метод fadeTo:

$("#yourDivId").fadeTo(500, 1); // Появление из ничего, словно по волшебству

Метод подходит для работы с элементами с установленными свойствами visibility: hidden и opacity: 0.

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

Быстрое переключение состояний с использованием классов

Когда требуется часто менять значение visibility, можно задействовать CSS-классы:

.hidden { visibility: hidden; opacity: 0; }
.visible { visibility: visible; opacity: 1; transition: opacity .5s; }

Для мгновенного переключения состояний:

$("#yourDivId").removeClass('hidden').addClass('visible'); // Класс игры в прятки повысился

Callback-функции: запланированная неожиданность

Направляйте callback-функции на задачу создания сложных анимаций с помощью fadeOut:

$("#yourDivId").fadeOut('slow', function() {
    $(this).css('visibility', 'visible').css('display', 'block').fadeTo(500, 1); // Вот это поворот! Встречайтесь!
});

Будьте внимательны: избегайте подводных камней

Зарезервированное пространство в документе

Элемент с visibility: hidden сохраняет свое пространство в потоке документа. Если это важно для вас, используйте свойство visibility, а не display.

Не работает CSS3 на сайтах? Мы знаем решение!

Если вам требуется предоставить похожий пользовательский опыт для резервных случаев, добавьте альтернативные действия:

if (!$.support.opacity) {
  $("#yourDivId").css('visibility', 'visible'); // Если прозрачность не работает, видимость придет на помощь!
}

Сочетание методов: полный контроль

Комбинация jQuery и CSS-переходов предоставляет файн-тюнинг над управлением видимостью элементов.

Плащ невидимости в одно движение

Для добавления динамики:

$("#toggleButton").click(function(){
    var $target = $("#yourDivId");
    if ($target.css('visibility') == 'hidden') {
        $target.css('visibility', 'visible').fadeTo(500, 1); // Перед вами незаметная смена состояния!
    } else {
        $target.fadeTo(500, 0, function(){
            $(this).css('visibility', 'hidden'); // Наблюдайте за чередованием видимости
        });
    }
});

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

Представим, что .show() – переключатель видимости:

💡 Вкл: .show() 
Состояние: 'display: none' 

Было: 🌑 (Невидимый)
Стало: 🌞 (Видимый)

В сравнении со скрытием через visibility:

💡 Вкл: .show()
Состояние: 'visibility: hidden'

Было: 🌫️ (Скрыт, но занимает место) 
Стало: 🌫️ (Также скрыт, место занято)

Запомните: .show() – это не универсальный метод для отображения элементов c 'visibility: hidden', точно также, как фонарь не освещает пространство за непроницаемой перегородкой!

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

1. .show() | Документация API JQuery — Детальное описание метода .show() в jQuery.
2. visibility – CSS: Cascading Style Sheets | MDN — Анализ свойства CSS visibility согласно документации MDN.
3. .css() | Документация API JQuery — Подробный разбор метода .css() в jQuery.
4. javascript – Как проверить, скрыт ли элемент в jQuery? – Stack Overflow — Обсуждение способов проверки видимости элементов в jQuery.
5. Обучение jQuery | Codecademy — Курс по jQuery для начинающих.
6. visibility | CSS-лайфхаки — Исследование взаимодействия свойства visibility и метода .animate() в jQuery.