Метод fadeIn - плавный показ элементов
Метод fadeIn плавно показывает скрытые
элементы, делая их непрозрачными. Скрыть
элементы можно с помощью метода
fadeOut,
сделав их прозрачными.
Синтаксис
Показ за заданное время,
400мс по умолчанию:
.fadeIn(длительность);
Время можно задавать не только в миллисекундах,
но и ключевыми словами slow (600мс)
и fast (200мс), чем больше значение,
тем медленней анимация:
.fadeIn('slow' или 'fast');
Если не указывать параметры - анимации не будет, элементы будут показываться мгновенно:
.fadeIn();
Можно также вторым параметром передать функцию плавности, а также третьим callback-функцию - сработает после выполнения анимации. Оба параметра необязательны:
.fadeIn(длительность, [функция плавности], [callback-функция]);
Можно передать методу различные опции, в виде объекта JavaScript, содержащего пары ключ: значение:
.fadeIn(options);
Такой объект может передавать следующие
параметры и функции - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Описание
этих параметров вы можете посмотреть для метода
⁅с href="/ru/javascript/lib/jquery/manual/animate/"⁆animate⁅/с⁆. Например,
установим длительность и функцию плавности:
.fadeIn( {duration: 800, easing: easeInSine} );
Пример
В следующем примере при нажатии на кнопку
#hide элемент с #test будет
скрываться с помощью метода fadeOut,
а на кнопку #show - показываться, с
помощью fadeIn. Также мы установим
скорость на 1000мс:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Пример
А в следующем примере после окончания
анимации при показе элемента #test мы
выведем алерт
с текстом '!', а при скрытии
с текстом '?':
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});