.slideDown()

Описание: Отображает совпавшие элементы плавным движением.

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

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

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

  • options
    Тип: Объект
    Карта дополнительных параметров для передачи методу.
    • duration (по умолчанию: 400)
      Тип: Число или Строка
      Строка или число, определяющее продолжительность анимации.
    • easing (по умолчанию: swing)
      Тип: Строка
      Строка, указывающая, какую функцию плавного изменения использовать для перехода.
    • queue (по умолчанию: true)
      Тип: Булево или Строка
      Логическое значение, указывающее, нужно ли помещать анимацию в очередь эффектов. Если false, анимация начнется немедленно. Начиная с jQuery 1.7, параметр queue также может принимать строку, в этом случае анимация добавляется в очередь, представленную этой строкой. При использовании пользовательского имени очереди анимация не запускается автоматически; вы должны вызвать .dequeue("queuename") для её запуска.
    • specialEasing
      Тип: Объект
      Объект, содержащий одну или несколько определенных параметром properties свойств CSS и соответствующих функций плавного изменения. (версия добавлена: 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.slideDown( [duration ] [, easing ] [, complete ] )

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

Метод .slideDown() анимирует высоту совпавших элементов. Это приводит к тому, что нижние части страницы сдвигаются вниз, уступая место открытым элементам.

Длительности задаются в миллисекундах; большие значения указывают на медленные, а не быстрые анимации. Строки '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" ).slideDown( "slow", function() {
    // Animation complete.
  });
});

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

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

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

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

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

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideDown demo</title>
  <style>
  div {
    background: #de9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    display: none;
    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>
 
<script>
$( document.body ).on( "click", function () {
  if ( $( "div" ).first().is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).hide();
  }
} );
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideDown demo</title>
  <style>
  div {
    background: #cfd;
    margin: 3px;
    width: 50px;
    text-align: center;
    float: left;
    cursor: pointer;
    border: 2px outset black;
    font-weight: bolder;
  }
  input {
    display: none;
    width: 120px;
    float: left;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">
 
<script>
$( "div" ).on( "click", function() {
  $( this ).css( {
    borderStyle: "inset",
    cursor: "wait"
  } );
  $( "input" ).slideDown( 1000, function() {
    $( this )
      .css( "border", "2px red inset" )
      .filter( ".middle" )
        .css( "background", "yellow" )
        .trigger( "focus" );
    $( "div" ).css( "visibility", "hidden" );
  } );
} );
 
</script>
 
</body>
</html>