Метод slideToggle

Методът slideToggle плавно показва скрити елементи и скрива показани.

Синтаксис

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

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

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

javascript.slideToggle('slow' или 'fast');

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

javascript.slideToggle();

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

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

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

javascript.slideToggle(options);

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

javascript.slideToggle( {duration: 600, easing: easeInSine} );

Пример

Нека след натискане на бутон, плавно скрием родителския div, който съдържа параграфи, с помощта на метода slideToggle (този div ще намерим с помощта на метода parent), след повторно натискане на бутона, div ще бъде отново плавно показан и т.н. Като подадем ключовата дума slow, ще зададем скорост от 600мс:

html<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>

javascript$('button').click(function() {
  $('#test').parent().slideToggle('slow');
});

Вижте също