jQuery функция .slideToggle()
Раздел: Эффекты jQuery
Данная функция объединила в себе методы .slideUp() и .slideDown()
Функция может не принимать никаких аргументов.
Лучше всего подходит для больших блоков
Обработчик события может быть прикреплен к div, ul, ol ...
Функция выполняется каждый раз при нажатии на элемент.
Опции: .slideToggle( [ продолжительность ] , [ ослабление ] , [ функция ])
- Продолжительность - скорость эффекта
- Ослабление- функция смягчения для перехода.
- Функция вызываемая после завершения анимации.
Ослабление необязательная опция, по умолчанию swing, с постоянной скоростью, называется linear
Длительность приведена в миллисекундах; более высокие значения указывают на более медленную анимацию, а не побыстрей. Строки 'fast' и 'slow' могут быть поставлены для обозначения длительностей 200 и 600миллисекунд, соответственно.
<div id="target"> <p>Блок с текстом</p> <p>Функция для вызова после завершения анимации, вызывается не один раз на соответствующий элемент.</p> </div>
// Без параметров
$( "#target" ).slideToggle();
// Продолжительность 1.5 секунды
$( "#target" ).slideToggle(1500);
// Вызов функции после окончания анимации
$( "#target" ).slideToggle('slow', function() {
// Animation complete.
});
Живые примеры
Пример 1
Блок с текстом
slideToggle Display or hide the matched elements with a sliding motion.
Живые примеры
Метод .slideToggle() анимирует высоту соответствующих элементов. Это приводит к сползанию или поднятию нижней части элемента, появлению или скрытию элемента. Если элемент был показан, то он будет скрыт; если был скрыт, то будет показан.
Свойство display сохраняется и восстанавливается по необходимости. Если элемент имеет свойство display в значении inline, когда скрыт или показан, следующий раз он будет показан inline. Когда высота достигает 0, свойство стиля display устанавливается в none для того, чтобы элемент больше не влиял на верстку страницы.
Если указанна, функция обратного вызова, то она вызывается после завершения анимации. Это может быть полезно для нанизывания различных анимаций вместе в определенной последовательности. В функцию обратного вызова не передается никаких аргументов, но this является элементом DOM, который анимируется. Если многочисленные элементы анимируются, важно отметить, что функция обратного вызова вызывается единожды для каждого соответствующего элемента, а не один раз в целом на анимацию.