toggle()

81
посл. ред. 28.10.2016

Метод toggle() скрывает или показывает на странице элементы текущей выборки в зависимости от их текущего состояния и от переданных аргументов. Для скрытых элементов (со свойством display: none) выполняется метод show(). Для остальных элементов выполняется метод hide().

Если метод вызывается без аргументов, тогда элементы скрываются/показываются мгновенно. Если при вызове метода toggle() указывается хотя бы один аргумент, тогда выполняется анимация появления элементов. При этом одновременно происходит плавное изменение размеров (width, height, margin и padding) и прозрачности (opacity) элементов.

Если элемент был скрыт средствами jQuery, тогда после отображения с помощью метода toggle() свойство display получит прежнее значение.

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

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

jQ_object.toggle() => jQuery
Мгновенно скрывает/показывает элементы текущей выборки.
jQ_object.toggle([duration][, easing][, complete]) => jQuery
Выполняет анимацию скрытия/появления элементов выборки изменением размеров и прозрачности.
jQ_object.toggle(опции) => jQuery
Выполняет анимацию скрытия/появления элементов выборки изменением размеров и прозрачности с учётом указанного объекта опций (параметров анимации).
jQ_object.toggle(show_hide) => jQuery
Действие определяется переданным булевым значением:
  • true - мгновенно показывает элементы текущей выборки;
  • false - мгновенно скрывает элементы текущей выборки.

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button class="button_toggle">toggle()</button>
  <button class="button_show">toggle(true)</button>
  <button class="button_hide">toggle(false)</button>
  <div style="width: 200px; height: 200px; background: coral"></div>
</body>
</html>
 
<script>
$('.button_toggle').on('click', function() {
  $('div').toggle({
    duration: 1000,
    specialEasing: {
      height: 'linear',
      width: 'swing'
    },
    progress: function(animation, progress, remainingMs) {
      $(this).text(remainingMs);
    },
    complete: function() {
      alert('Анимация завершена');
    }
  });
});
$('.button_show').on('click', function() {
  $('div').toggle(true);
});
$('.button_hide').on('click', function() {
  $('div').toggle(false);
});
</script>