Метод 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. Описание
этих параметров вы можете посмотреть для метода
⁅с href="/ru/javascript/lib/jquery/manual/animate/"⁆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');
});