Метод slideToggle
Методът slideToggle плавно показва
скрити елементи и скрива показани.
Синтаксис
Показване/скриване за зададено време,
400мс по подразбиране:
.slideToggle(продължителност);
Времето може да се задава не само в милисекунди,
но и с ключови думи slow (600мс)
и fast (200мс), колкото по-голяма е стойността,
толкова по-бавна е анимацията:
.slideToggle('slow' или 'fast');
Ако не се указват параметри - анимация няма да има, елементите ще се показват/скриват мигновено:
.slideToggle();
Може също така като втори параметър да се подаде функция за плавност, както и като трети callback-функция - ще се изпълни след приключване на анимацията. И двата параметъра не са задължителни:
.slideToggle(продължителност, [функция за плавност], [callback-функция]);
На метода могат да се подадат различни опции, под формата на JavaScript обект, съдържащ двойки ключ: стойност:
.slideToggle(options);
Такъв обект може да предава следните
параметри и функции - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Описание
на тези параметри можете да видите за метода
animate. Например,
нека зададем продължителност и функция за плавност:
.slideToggle( {duration: 600, easing: easeInSine} );
Пример
Нека след натискане на бутон, плавно скрием
родителския div, който съдържа параграфи,
с помощта на метода slideToggle (този div
ще намерим с помощта на метода
parent),
след повторно натискане на бутона, div ще бъде
отново плавно показан и т.н. Като подадем ключовата дума
slow, ще зададем скорост от 600мс:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
