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