Метод toggle

Методът toggle редува плавен показ/скъване на елементи. Ако елементът е показан, той ще бъде скрит и обратно.

Синтаксис

Показване за зададено време в милисекунди, 400мс по подразбиране:

.toggle(продължителност);

Времето може да се задава не само в милисекунди, но и с ключови думи slow (600мс) и fast (200мс), колкото по-голяма е стойността, толкова по-бавна е анимацията:

.toggle('slow' или 'fast');

Може с параметър display да се подава стойност true или false. Ако е true, то елементът ще се само показва, false - скрива:

.toggle(display);

Ако не се указват параметри - анимация няма да има, елементите ще се показват/скриват моментно:

.toggle();

Може също така с втори параметър да се подаде функция за плавност, както и трети параметър callback-функция - ще се изпълни след завършване на анимацията. И двата параметъра не са задължителни:

.toggle(продължителност, [функция за плавност], [callback-функция]);

Може просто с втори незадължителен параметър да се подаде callback-функция - ще се изпълни след завършване на анимацията:

.toggle(продължителност, [callback-функция]);

На метода могат да се подадат различни опции, под формата на JavaScript обект, съдържащ двойки ключ: стойност:

.toggle(options);

Такъв обект може да предава следните параметри и функции - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Описание на тези параметри можете да видите за метода animate. Например, нека зададем продължителност и функция за плавност:

.toggle( {duration: 800, easing: easeInSine} );

Пример

Нека след натискане на бутон, да показваме плавно скрития параграф с помощта на метода toggle. Като подадем ключовата дума slow, ние задаваме скорост от 600мс. При повторно натискане - скрива:

<button>покажи текст</button>
<p style="display: none">текст</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Вижте също

метод fadeToggle,
който променя прозрачността на елементите
метод slideToggle,
който редува плавен показ/скъване на елементи
метод show,
който плавно показва елементи
метод hide,
който плавно скрива елементи