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

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

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

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