Метод 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>show text</button>
<p style="display: none">text</p>

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

Смотрите также

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