.slideToggle()

.slideToggle( [duration ] [, complete ] )Возвращает: jQuery

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

версия добавлена: 1.0.slideToggle( [duration ] [, complete ] )
- duration (по умолчанию: 400)
  
  Тип: Число или Строка
  
  Строка или число, определяющее длительность анимации.
- complete
  
  Тип: Функция()
  
  Функция, вызываемая по завершении анимации, вызывается один раз на каждый сопоставленный элемент.
версия добавлена: 1.0.slideToggle( 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.slideToggle( [duration ] [, easing ] [, complete ] )
- duration (по умолчанию: 400)
  
  Тип: Число или Строка
  
  Строка или число, определяющее длительность анимации.
- easing (по умолчанию: swing)
  
  Тип: Строка
  
  Строка, указывающая функцию плавного перехода для перехода.
- complete
  
  Тип: Функция()
  
  Функция, вызываемая по завершении анимации, вызывается один раз на каждый сопоставленный элемент.

Метод .slideToggle() анимирует высоту сопоставленных элементов. Это приводит к тому, что нижние части страницы сдвигаются вверх или вниз, создавая впечатление раскрытия или скрытия элементов. Если элемент изначально отображается, он будет скрыт; если скрыт, он будет показан. Свойство display сохраняется и восстанавливается по мере необходимости. Если у элемента есть значение display равное inline, затем он скрывается и отображается, он снова будет отображаться inline. Когда высота достигает 0 после анимации скрытия, свойство стиля display устанавливается в none, чтобы обеспечить, что элемент больше не влияет на макет страницы.

Длительности задаются в миллисекундах; более высокие значения указывают на более медленные анимации, а не на более быстрые.

Строки 'fast' и 'slow' могут быть предоставлены для указания длительностей 200 и 600 миллисекунд соответственно.

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

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

Мы заставим .slideToggle() быть вызванным при нажатии на другой элемент:

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

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

Рисунок 1 - Иллюстрация эффекта `slideToggle()` при скрытии изображения

Второй щелчок снова отобразит элемент:

Рисунок 2 - Иллюстрация эффекта `slideToggle()` при отображении изображения

Плавный переход

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

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

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

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

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

Все эффекты jQuery, включая .slideToggle(), могут быть отключены глобально путем установки jQuery.fx.off = true, что фактически устанавливает длительность в 0. Более подробная информация см. в jQuery.fx.off.
Если .slideDown() вызывается для упорядоченного списка (<ul>) и его <li> элементам задана позиция (relative, absolute или fixed), эффект может работать неправильно в IE6 и, как минимум, в IE9, если <ul> не имеет "layout." Чтобы исправить проблему, добавьте свойства position: relative; и zoom: 1; CSS-декларации в ul.

Примеры:

Анимирует все абзацы для плавного сдвига вверх или вниз, завершая анимацию в течение 600 миллисекунд.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  p {
    width: 400px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).slideToggle( "slow" );
});
</script>
 
</body>
</html>

Демо:

Анимирует блоки между разделителями с переключателем, который делает некоторые видимыми, а некоторые — скрытыми.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  div {
    background: #b977d1;
    margin: 3px;
    width: 60px;
    height: 60px;
    float: left;
  }
  div.still {
    background: #345;
    width: 5px;
  }
  div.hider {
    display: none;
  }
  span {
    color: red;
  }
  p {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
 
<script>
$( "#aa" ).on( "click", function() {
  $( "div:not(.still)" ).slideToggle( "slow", function() {
    var n = parseInt( $( "span" ).text(), 10 );
    $( "span" ).text( n + 1 );
  });
});
</script>
 
</body>
</html>

.slideToggle( [duration ] [, complete ] )Возвращает: jQuery

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

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

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

Плавный переход

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

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

Примеры:

Демо:

Демо: