|
|
Синтаксис и описание:
Добавлено в jQuery 1.0.hide( [ duration ] [, complete ] )Добавлено в jQuery 1.0.hide( options )Добавлено в jQuery 1.4.3.hide( duration [, easing ] [, complete ] )Команда .hide() скрывает элементы набора jQuery. Без аргументов она мгновенно устанавливает display: none. С параметром duration — плавно, за счёт очереди эффектов, одновременно уменьшает ширину, высоту и непрозрачность элемента до нуля, а затем устанавливает display: none.
Параметры:
duration – (число | строка) Продолжительность в миллисекундах либо "fast" (200 мс) / "slow" (600 мс). По умолчанию — 400 мс. easing – (строка, с jQuery 1.4.3) Имя функции перехода: встроены только swing (по умолчанию) и linear. complete – (функция) Вызывается по одному разу на каждый анимированный элемент после завершения эффекта. options – (объект) Хэш параметров: duration, easing, complete, queue, step, progress, specialEasing и др. — та же система параметров, что и у .animate().
Примечание: Перед скрытием jQuery сохраняет исходное значение CSS-свойства display элемента (например, inline, flex, table-row) во внутреннем кеше данных, поэтому последующий .show() восстановит именно это значение, а не всегда block. Примечание: Парный метод — .show(); переключатель состояния «показан/скрыт» — .toggle(). Проверить, скрыт ли элемент через display: none, можно селектором :hidden. Примечание: Нативная альтернатива без анимации и без jQuery — глобальный HTML-атрибут hidden: браузер по умолчанию применяет к нему правило [hidden] { display: none }. Учтите специфичность: если в проекте на элемент уже навешан класс с собственным display, атрибут hidden может быть перебит более специфичным CSS-правилом — тогда потребуется явное [hidden] { display: none !important; }. В jQuery 3.x и 4.0: Метод не деприкейчен и работает как прежде. В slim-сборке jQuery (доступна с 3.0) анимационная часть эффектов недоступна вовсе, а с 4.0 slim-сборка дополнительно лишена модулей deferred и queue — то есть версии .hide() с duration в slim-сборке 4.0 работать не будут, доступен только мгновенный вызов без анимации. Нужны эффекты — подключайте полную сборку jQuery.
Примеры:
Мгновенное и анимированное скрытие.
$('#alert').hide(); // сразу display: none
$('#alert').hide(300, function() {
console.log('Блок полностью скрыт');
});
Скрытие с easing и восстановление исходного display через .show().
// <span id="badge" style="display: inline-block;">Новое</span>
$('#badge').hide('slow');
// ...позже:
$('#badge').show(); // вернётся именно inline-block, а не block
Нативная альтернатива атрибутом hidden — без анимации, зато без зависимости от jQuery.
document.getElementById('alert').hidden = true;
// эквивалент показа:
document.getElementById('alert').hidden = false;
[ наверх ]
|
|
