Эффекты скольжения

Эффекты скольжения позволяют нам плавно скрыть или раскрыть элемент. Эффекты скольжения реализованы в виде методов slideUp(), slideDown() и slideToggle().

Если метод slideUp скрывает элемент в направлении вверх, как бы скользя, то метод slideDown плавно раскрывает скрытый элемент в направлении вниз. Метод slideToggle комбинирует действие обоих методов: если элемент скрыт, но раскрывается, если раскрыт - скрывается.

Эти методы имеют одинаковые формы использования:

• slideUp/slideDown/slideToggle(): метод без параметров

• slideUp/slideDown/slideToggle([duration] [, easing][, complete]). Параметр duration указывает как долго сокрытие элемента будет длиться. По умолчанию его значение равно 400 миллисекунд.

  Параметр easing, который принимает название функции плавности анимации в виде строки. По умолчанию его значение равно "swing". Также можно использовать значения 'slow' и 'fast', которые соответствуют длительности эффекта в 600 и 200 миллисекунд.

  Параметр complete представляет функцию, вызываемую методом после завершения анимации.

Допустим, пусть у нас будут две кнопки. По нажатию на первую кнопку она будет медленно скрываться, а по нажатию на вторую кнопку скрытая первая кнопка будет раскрываться:

<button id="slideUp">Скрыть</button>
<button id="slideDown">Раскрыть</button>
<script type="text/javascript">
$(function() {
	$('#slideUp').click(function(){
		 $(this).slideUp();
	});
	$('#slideDown').click(function(){
		 $('#slideUp').slideDown();
	});
});
</script>

Подобным образом можно применить метод slideToggle:

$(function() {
	$('#slideUp').click(function(){
		 $(this).slideToggle('slow');
	});
	$('#slideDown').click(function(){
		 $('#slideUp').slideToggle(2000);
	});
});