Сейчас мы с вами разберем работу с эффектами и анимацией на jQuery. Эти эффекты позволяют анимировать элемент - плавно скрыть или показать его. Для каждого эффекта существуют свои методы jQuery. Давайте с ними разбираться.

Методы hide и show

Методы hide и show позволяют скрывать и показывать элементы. В следующем примере по нажатию на одну кнопку элемент будет скрываться, а по нажатию на вторую - показываться:

<button id="hide">Спрятать</button>
<button id="show">Показать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
	$('#elem').hide();
});

$('#show').click(function() {
	$('#elem').show();
});

Результат выполнения кода:

Блок с текстом.

Можно задавать время выполнения эффекта в миллисекундах (1000 миллисекунд = 1 секунда). В этом случае эффект будет плавно проигрываться в течении заданного времени. Давайте зададим время выполнения эффекта в 1 секунду и посмотрим, как поменяется эффект:

<button id="hide">Спрятать</button>
<button id="show">Показать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
	$('#elem').hide(1000);
});

$('#show').click(function() {
	$('#elem').show(1000);
});

Результат выполнения кода:

Блок с текстом.

Методы slideUp и slideDown

Методы slideUp и slideDown позволяют сделать закатывание и выкатывание элемента обратно (параметром они также принимают время исполнения эффекта, если его не указать - возьмется время по умолчанию, около половины секунды). Как это выглядит - смотрите на следующем примере:

<button id="hide">Спрятать</button>
<button id="show">Показать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
	$('#elem').slideUp(1000);
});

$('#show').click(function() {
	$('#elem').slideDown(1000);
});

Результат выполнения кода:

Блок с текстом.

Метод slideToggle

Следующий метод - slideToggle - это одновременно slideUp и slideDown. Работает так: если элемент скрыт - показывает его, а если показан - скрывает. Удобство в том, что это все можно повесить на одну кнопку, а не на две, как это было в предыдущих примерах. И по нажатию на эту кнопку элемент будет то скрываться, то показываться:

<button id="toggle">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>
$('#toggle').click(function() {
	$('#elem').slideToggle(1000);
});

Результат выполнения кода:

Блок с текстом.

Методы fadeOut и fadeIn

Методы fadeOut и fadeIn реализуют плавное исчезновение и появление элемента:

<button id="hide">Спрятать</button>
<button id="show">Показать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
	$('#elem').fadeOut(1000);
});

$('#show').click(function() {
	$('#elem').fadeIn(1000);
});

Результат выполнения кода:

Блок с текстом.

Метод fadeToggle

Метод fadeToggle работает аналогично slideToggle - тоже реализует чередование эффектов: то показывает элемент, то скрывает:

<button id="toggle">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>
$('#toggle').click(function() {
	$('#elem').fadeToggle(1000);
});

Результат выполнения кода:

Блок с текстом.

Метод fadeTo

Метод fadeTo позволяет уменьшить прозрачность opacity элемента до определенного значения (0 - полностью прозрачный, 1 - полностью непрозрачный). Первым параметром метод принимает до какого значения уменьшить прозрачность, а вторым - время выполнения. Давайте по клику на кнопку сделаем наш элемент полупрозрачным:

<button id="fade">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>
$('#fade').click(function() {
	$('#elem').fadeTo(0.5, 1000);
});

Результат выполнения кода:

Блок с текстом.

Метод animate

Все методы, которые мы разбирали ранее, несколько ограниченны - они делают именно то, для чего созданы. Если вам нужно больше контроля за анимацией - используйте универсальный метод animate.

Первым параметром этот метод принимает объект, в котором следует задать новые значения CSS свойств, которые вы хотите анимировать. А вторым параметром - время выполнения анимации.

Давайте сделаем так, чтобы по нажатию на кнопку элемент сжался до размера высота 50px, ширина 100px:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}
<button id="button">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>
$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Результат выполнения кода:

Если указать значение в таком формате height: '+=50', то анимация будет работать так: к текущему значению высоты будет прибавлено 50px (в нашем случае) и элемент будет плавно анимирован до нового значения. Посмотрим на примере:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}
<button id="button">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>
$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Результат выполнения кода:

Подробнее про метод animate смотрите в справочнике jQuery: animate.

Действие после окончания эффекта

Иногда вам может потребоваться выполнить какое-либо действие после окончания эффекта. К примеру, по нажатию на кнопку какой-то блок должен плавно спрятаться и только после того, как он окончательно спрячется, нужно что-то вывести на экран.

Если просто писать строчки кода одна за одной - элемент еще не успеет спрятаться, как начнет выполнятся следующая строчка кода - и получится не то, что мы хотели бы:

<button id="hide">Спрятать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
	$('#elem').hide(1000);
	$('#hide').html('Спрятано');
});

Нажмите на кнопку - элемент начнет скрываться и сразу же поменяется текст кнопки:

Блок с текстом.

Чтобы избежать таких проблем, во всех методах по работе с анимацией и эффектами предусмотрен второй параметр - в него мы можем передать функцию, которая выполнится после окончания анимации:

<button id="hide">Спрятать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
	$('#elem').hide(1000, function() {
		$('#hide').html('Спрятано');
	});
});

Результат выполнения кода:

Блок с текстом.