slideUp()

посл. ред. 26.10.2016

Метод slideUp() скрывает на странице все элементы текущей выборки. Анимация исчезновения элементов происходит за счёт плавного уменьшения высоты элементов (height) до 0 (или до значения, установленного свойством min-height).

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

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

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

jQ_object.slideUp([duration][, easing][, complete]) => jQuery: Выполняет анимацию исчезновения элементов выборки уменьшением высоты до 0.
jQ_object.slideUp(опции) => 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; min-height: 50px; background: coral"></div>
</body>
</html>

<script>
$('button').on('click', function() {
  $('div')
  .slideUp(1000, 'linear', function() {
    alert('Анимация завершена');
  });
});
</script>

Высота элемента во время анимации уменьшится только до 50px (значение свойства min-height), но в итоге элемент всё равно будет скрыт. Если после скрытия элемента нажать на кнопку ещё раз, тогда функция complete запустится без выдержки времени.