Метод .fadeOut() плавно скрывает элементы. Показать элементы можно с помощью метода fadeIn.

См. также метод hide, который скрывает элементы.

См. также урок работа с эффектами и анимацией jQuery для более полного понимания.

Синтаксис

Показ за заданное время:

.fadeOut(миллисекунды)

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

.fadeOut(slow или fast)

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

.fadeOut()

Вторым параметром можно указывать скорость анимации:

.fadeOut(миллисекунды, скорость анимации)

После выполнения анимации можно вызвать callback-функцию:

.fadeOut(миллисекунды, функция)

Примеры

Пример

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

<button onclick="hide()">Скрыть</button>
<button onclick="show()">Показать</button>
<div id="test"></div>
function show() {
	$('#test').fadeIn(1000);
}
function hide() {
	$('#test').fadeOut(1000);
}

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

Пример

А в следующем примере после проигрывания анимации будет выводится алерт с текстом '!':

<button onclick="hide()">Скрыть</button>
<button onclick="show()">Показать</button>
<div id="test"></div>
function show() {
	$('#test').fadeIn(1000, function(){alert('!');});
}
function hide() {
	$('#test').fadeOut(1000, function(){alert('!');});
}

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