.toggle()


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

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

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

    • duration (значение по умолчанию: 400)
      Тип: Number или String
      Строка или число определяющее длительность анимации.
    • complete
      Тип: Function()
      Функция, которая будет вызвана по окончании анимации, вызывается для каждого элемента в наборе объекта jQuery.
  • Добавлен в версии: 1.0.toggle( options )

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

    • duration (значение по умолчанию: 400)
      Тип: Number или String
      Строка или число определяющее длительность анимации.
    • easing (значение по умолчанию: swing)
      Тип: String
      Строка определяющее какая easing функция будет использована.
    • complete
      Тип: Function()
      Функция, которая вызывается один раз для анимации на элементе при ее завершении.
  • Добавлен в версии: 1.3.toggle( display )

    • display
      Тип: Boolean
      Используйте значение true для отображения элемент или false для его скрытия.

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

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

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

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

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

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

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

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

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

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

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

1
2
3
4
5
$( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});

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

Изображение 1 - Иллюстрация анимации toggle() когда изображение скрывается

Второй клик покажет элемент опять:

Изображение 2 - Иллюстрация анимации toggle() когда изображение показывается

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

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

эквивалентно следующему:

1
2
3
4
5
if ( display === true ) {
$( "#foo" ).show();
} else if ( display === false ) {
$( "#foo" ).hide();
}

Дополнительное примечание:

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

Примеры:

Переключает все параграфы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Переключить</button>
<p>Привет</p>
<p style="display: none">Пока</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
</body>
</html>

Демонстрация:

Анимирует все параграфы: показывает если они скрыты и скрывает если они показаны, длительность анимации 600 милисекунд.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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-1.10.2.js"></script>
</head>
<body>
<button>Переключить</button>
<p>Хийя</p>
<p>Какой интересный текст?</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle( "slow" );
});
</script>
</body>
</html>

Демонстрация:

Покажет все параграфы, затем скроет их всех, назад и вперед.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Переключить</button>
<p>Привет</p>
<p style="display: none">Пока</p>
<script>
var flip = 0;
$( "button" ).click(function() {
$( "p" ).toggle( flip++ % 2 === 0 );
});
</script>
</body>
</html>

Демонстрация: