Метод slideDown

Методът slideDown плавно показва скрити елементи, разгъвайки ги отгоре надолу. Скриване на елементи може да се направи с помощта на метода slideUp.

Синтаксис

Показване за зададено време, 400мс по подразбиране:

.slideDown(продължителност);

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

.slideDown('slow' или 'fast');

Ако не се указват параметри - анимация няма да има, елементите ще се показват мигновено:

.slideDown();

Може също като втори параметър да се подаде функция за плавност, както и като трети callback функция - ще се задейства след приключване на анимацията. И двата параметъра не са задължителни:

.slideDown(продължителност, [функция за плавност], [callback функция]);

На метода могат да се подадат различни опции, под формата на JavaScript обект, съдържащ двойки ключ: стойност:

.slideDown(options);

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

.slideDown( {duration: 600, easing: easeInSine} );

Пример

Нека след натискане на бутон, плавно да показваме скрит параграф с помощта на метода slideDown. Като подадем ключовата дума slow, ще зададем скорост от 600мс. След приключване на анимацията ще изведем в конзолата 'Animation complete':

<button>покажи текст</button>
<p style="display: none">текст</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

Вижте също

метод slideUp,
който плавно скрива елементи
метод slideToggle,
който редува плавен показ/скриване на елементи
метод fadeIn,
който плавно показва скрити елементи, правейки ги непрозрачни
метод show,
който плавно показва елементи