.slideUp()

Описание: Скрыть сопоставленные элементы с помощью плавного сдвига вверх.

• Добавленная версия: 1.0.slideUp( [duration ] [, complete ] )

  • duration (по умолчанию: 400)
    Тип: Число или Строка
    Строка или число, определяющие длительность анимации.
  • complete
    Тип: Функция()
    Функция, вызываемая после завершения анимации, вызывается один раз для каждого сопоставленного элемента.

• Добавленная версия: 1.0.slideUp( options )

  • options
    Тип: Объект
    Словарь дополнительных параметров, передаваемых методу.
    • duration (по умолчанию: 400)
      Тип: Число или Строка
      Строка или число, определяющие длительность анимации.
    • easing (по умолчанию: swing)
      Тип: Строка
      Строка, указывающая функцию плавного изменения, используемую для перехода.
    • queue (по умолчанию: true)
      Тип: Булево значение или Строка
      Булево значение, указывающее, следует ли помещать анимацию в очередь эффектов. Если false, анимация начнется немедленно. С jQuery 1.7, параметр queue также может принимать строку, в этом случае анимация добавляется в очередь, представленную этой строкой. При использовании пользовательского имени очереди анимация не запускается автоматически; вам необходимо вызвать .dequeue("queuename") для ее запуска.
    • specialEasing
      Тип: Объект
      Объект, содержащий одну или несколько свойств CSS, определенных параметром properties, и соответствующие им функции плавного изменения. (Добавленная версия: 1.4)
    • step
      Тип: Функция( Число now, Tween tween )
      Функция, вызываемая для каждого анимированного свойства каждого анимированного элемента. Эта функция предоставляет возможность изменить объект Tween, чтобы изменить значение свойства перед его установкой.
    • progress
      Тип: Функция( Promise animation, Число progress, Число remainingMs )
      Функция, вызываемая после каждого шага анимации, только один раз для каждого анимированного элемента независимо от количества анимированных свойств. (Добавленная версия: 1.8)
    • complete
      Тип: Функция()
      Функция, которая вызывается после завершения анимации элемента.
    • start
      Тип: Функция( Promise animation )
      Функция, вызываемая при начале анимации элемента. (Добавленная версия: 1.8)
    • done
      Тип: Функция( Promise animation, Булево значение jumpedToEnd )
      Функция, вызываемая при завершении анимации элемента (объект Promise решается). (Добавленная версия: 1.8)
    • fail
      Тип: Функция( Promise animation, Булево значение jumpedToEnd )
      Функция, вызываемая при невозможности завершения анимации элемента (объект Promise отклоняется). (Добавленная версия: 1.8)
    • always
      Тип: Функция( Promise animation, Булево значение jumpedToEnd )
      Функция, вызываемая при завершении или остановке анимации элемента без завершения (объект Promise решается или отклоняется). (Добавленная версия: 1.8)

• Добавленная версия: 1.4.3.slideUp( [duration ] [, easing ] [, complete ] )

  • duration (по умолчанию: 400)
    Тип: Число или Строка
    Строка или число, определяющие длительность анимации.
  • easing (по умолчанию: swing)
    Тип: Строка
    Строка, указывающая функцию плавного изменения, используемую для перехода.
  • complete
    Тип: Функция()
    Функция, вызываемая после завершения анимации, вызывается один раз для каждого сопоставленного элемента.

Метод .slideUp() анимирует высоту сопоставленных элементов. Это приводит к тому, что нижние части страницы сдвигаются вверх, скрывая элементы. После того, как высота достигнет 0 (или, если задано, любого значения свойства CSS min-height), свойство display устанавливается в none, чтобы убедиться, что элемент больше не влияет на расположение страницы.

Длительности задаются в миллисекундах; более высокие значения указывают на более медленные анимации, а не на более быстрые. Строки 'fast' и 'slow' могут быть использованы для указания длительностей в 200 и 600 миллисекунд соответственно. Если указана любая другая строка или параметр duration опущен, используется значение по умолчанию 400 миллисекунд.

Мы можем анимировать любой элемент, такой как простое изображение:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

При условии, что элемент изначально показан, мы можем скрыть его медленно:

$( "#clickme" ).on( "click", function() {
  $( "#book" ).slideUp( "slow", function() {
    // Animation complete.
  });
});

Плавное изменение

С версии jQuery 1.4.3 можно использовать необязательную строку, называющую функцию плавного изменения. Функции плавного изменения задают скорость, с которой анимация происходит в разные моменты анимации. Единственные реализованные функции плавного изменения в библиотеке jQuery — это значения по умолчанию, называемые swing, и функция, выполняющая переход с постоянной скоростью, называемая linear. Больше функций плавного изменения доступны с помощью плагинов, в частности, с помощью набора jQuery UI jQuery UI suite.

Функция обратного вызова

Если она указана, функция обратного вызова запускается после завершения анимации. Это может быть полезно для последовательного объединения различных анимаций. Функция обратного вызова не получает аргументы, но this устанавливается в DOM-элемент, который анимируется. Если анимируется несколько элементов, важно отметить, что функция обратного вызова выполняется один раз для каждого сопоставленного элемента, а не один раз для всей анимации.

С версии jQuery 1.6 метод .promise() может использоваться совместно с методом deferred.done() для выполнения одной функции обратного вызова для всей анимации, когда все сопоставленные элементы завершат свои анимации (см. пример для .promise()).

Дополнительные заметки:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
  div {
    background: #3d9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( document.body ).on( "click", function() {
  if ( $( "div" ).first().is( ":hidden" ) ) {
    $( "div" ).show( "slow" );
  } else {
    $( "div" ).slideUp();
  }
} );
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
 div {
   margin: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>
  <button>Hide One</button>
  <input type="text" value="One">
</div>
 
<div>
  <button>Hide Two</button>
  <input type="text" value="Two">
</div>
 
<div>
  <button>Hide Three</button>
  <input type="text" value="Three">
</div>
 
<div id="msg"></div>
 
<script>
$( "button" ).on( "click", function() {
  $( this ).parent().slideUp( "slow", function() {
    $( "#msg" ).text( $( "button", this ).text() + " has completed." );
  });
});
</script>
 
</body>
</html>