Метод fadeIn

Метод .fadeIn() плавно показывает скрытые элементы, выкатывая их сверху вниз. Скрыть элементы можно с помощью метода fadeOut.

См. также метод show, который показывает элементы.

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

Синтаксис

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

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

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

.fadeIn(slow или fast)

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

.fadeIn()

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

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

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

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

Примеры

Пример

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

<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('!');});
}