Елементи будуть показані або приховані негайно, без анімації, за допомогою зміни 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 елемент. Якщо анімується відразу кілька елементів, то важливо розуміти що функція зворотного виклику виконається один раз для кожного з цих елементів, а не один раз для всієї анімації.
Ми можемо анімувати будь-який елемент, наприклад просте зображення:
Ми можемо анімувати за допомогою .toggle () після кліка на інший елемент:
З самого початку показивемим елементом, ми можемо приховати його повільно після першого кліка:
Другий клік покаже елемент знову:
Друга версія методу приймає булевий параметр. Якщо цей параметр дорівнює true. то елемент здасться, якщо false елемент ховається. По суті вираз:
Додаткова примітка:
- Всі ефекти jQuery, включаючи .toggle (). можуть бути відключені глобально за допомогою настройки jQuery.fx.off = true. яка фактично встановлює тривалість анімації в значення 0. Більш детально це описано на сторінці jQuery.fx.off.