Метод toggle

Метод toggle чередует плавный показ/скрытие элементов. Если элемент показан, то он будет скрыт и наоборот.

Синтаксис

Показ за заданное время в миллисекундах, 400мс по умолчанию:

javascript.toggle(длительность);

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

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

Можно параметром display передавать значение true или false. Если true, то элемент будет только показываться, false - скрываться:

javascript.toggle(display);

Если не указывать параметры - анимации не будет, элементы будут показываться/скрываться мгновенно:

javascript.toggle();

Можно также вторым параметром передать функцию плавности, а также третьим callback-функцию - сработает после выполнения анимации. Оба параметра необязательны:

javascript.toggle(длительность, [функция плавности], [callback-функция]);

Можно просто вторым необязательным параметром передать callback-функцию - сработает после выполнения анимации:

javascript.toggle(длительность, [callback-функция]);

Можно передать методу различные опции, в виде JavaScript объекта, содержащего пары ключ: значение:

javascript.toggle(options);

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

javascript.toggle( {duration: 800, easing: easeInSine} );

Пример

Давайте после нажатия кнопки, будем плавно показывать скрытый абзац с помощью метода toggle. Передав ключевое слово slow, мы установим скорость на 600мс. По повторному нажатию - скрывать:

html<button>show text</button>
<p style="display: none">text</p>

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

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