Метод 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,
который плавно скрывает элементы