Метод slideUp

Метод slideUp плавно скрывает элементы, закатывая их снизу вверх. Показать элементы можно с помощью метода slideDown.

Синтаксис

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

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

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

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

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

.slideUp();

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

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

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

.slideUp(options);

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

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

Пример

Давайте после нажатия кнопки, плавно скроем родительский div, который содержит инпут и кнопку, с помощью метода slideUp (этот div мы найдем с помощью метода parent). Передав ключевое слово slow, мы установим скорость на 600мс. В div с #test мы выведем надпись 'Text is hidden':

<div>
	<button>hide text</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('Text is hidden');
	});
});

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

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