hide()

посл. ред. 26.10.2016

Метод hide() скрывает на странице все элементы текущей выборки. Если метод вызывается без аргументов, тогда элементы скрываются мгновенно. Если при вызове метода hide() указывается хотя бы один аргумент, тогда выполняется анимация исчезновения элементов. При этом одновременно происходит плавное уменьшение размеров (width, height, margin и padding) элементов до 0 и увеличение прозрачности (opacity) до 100%.

Если метод hide() вызывается без аргументов или продолжительность анимации равна 0, тогда он запускается немедленно, а не добавляется в очередь анимационных эффектов.

Анимация исчезновения элементов определяется переданными аргументами, но в итоге всем элементам устанавливается свойство display: none. Важной особенностью данного метода является то, что перед изменением свойства display в памяти сохраняется текущее значение данного свойства. Если элемент будет снова показан на странице, тогда свойство display получит прежнее значение.

Параметры анимации задаются в виде объекта. Параметры duration, easing и complete можно задать отдельными аргументами.

Варианты использования

jQ_object.hide() => jQuery: Мгновенно скрывает все элементы выборки.
jQ_object.hide([duration][, easing][, complete]) => jQuery: Выполняет анимацию исчезновения элементов выборки уменьшением размеров до 0 и увеличением прозрачности до 100%.
jQ_object.hide(опции) => jQuery: Выполняет анимацию исчезновения элементов выборки с учётом указанного объекта опций (параметров анимации).

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>Кнопка</button>
  <div style="width: 200px; height: 200px; background: coral"></div>
</body>
</html>
 
<script>
$('button').on('click', function() {
  $('div')
  .hide({
    duration: 5000,
    specialEasing: {
      height: 'linear',
      width: 'swing'
    },
    progress: function(animation, progress, remainingMs) {
      $(this).text(remainingMs);
    },
    complete: function() {
      alert('Анимация завершена');
    }
  });
});
</script>

Если после скрытия элемента нажать на кнопку ещё раз, тогда функция complete запустится без выдержки времени.