.toggle()

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

Описание: Отобразить или скрыть совпавшие элементы.

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

Примечание: набор обработки событий также имеет метод с именем .toggle(). Какой из них срабатывает, зависит от набора переданных аргументов.

Без параметров метод .toggle() просто переключает видимость элементов:

$( ".target" ).toggle();

Совпавшие элементы будут отображаться или скрываться немедленно, без анимации, путем изменения свойства CSS display. Если элемент изначально отображается, он будет скрыт; если скрыт, он будет показан. Свойство display сохраняется и восстанавливается по мере необходимости. Если у элемента есть свойство display со значением inline, затем он скрыт и показан, он снова будет отображаться inline.

При указании duration, объекта или единственной функции "complete", .toggle() становится методом анимации. Метод .toggle() анимирует ширину, высоту и непрозрачность совпавших элементов одновременно. Когда эти свойства достигают 0 после анимации скрытия, свойство стиля display устанавливается в none для обеспечения того, что элемент больше не влияет на макет страницы.

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

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

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

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

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

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

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

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

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

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

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

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

Вторая версия метода принимает булевый параметр. Если этот параметр true, то совпавшие элементы отображаются; если false, элементы скрываются. По сути, утверждение:

$( "#foo" ).toggle( display );

эквивалентно:

if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {
  $( "#foo" ).hide();
}

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

Все эффекты jQuery, включая .toggle(), могут быть выключены глобально путем установки jQuery.fx.off = true, что эффективно устанавливает продолжительность в 0. Дополнительную информацию см. в jQuery.fx.off.

Примеры:

Переключает все абзацы.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).toggle();
} );
</script>
 
</body>
</html>

Демо:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
    font-size: 16px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).toggle( "slow" );
});
</script>
 
</body>
</html>

Демо:

Отображает все абзацы, затем скрывает их все, туда и обратно.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
<script>
var flip = 0;
$( "button" ).on( "click", function() {
  $( "p" ).toggle( flip++ % 2 === 0 );
});
</script>
 
</body>
</html>

.toggle()

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

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

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

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

версия добавлена: 1.3.toggle( display )

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

Примеры:

Демо:

Демо:

Демо: