Метод .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('!');});
}
Результат выполнения кода: