Метод fadeOut
Метод fadeOut
плавно скрывает
элементы. Показать элементы можно с помощью метода
fadeIn
,
сделав их непрозрачными.
Синтаксис
Показ за заданное время,
400мс
по умолчанию:
.fadeOut(длительность);
Время можно задавать не только в миллисекундах,
но и ключевыми словами slow
(600мс
)
и fast
(200мс
), чем больше значение,
тем медленней анимация:
.fadeOut('slow' или 'fast');
Если не указывать параметры - анимации не будет, элементы будут скрываться мгновенно:
.fadeOut();
Можно также вторым параметром передать функцию плавности, а также третьим callback-функцию - сработает после выполнения анимации. Оба параметра необязательны:
.fadeOut(длительность, [функция плавности], [callback-функция]);
Можно передать методу различные опции, в виде объекта JavaScript, содержащего пары ключ: значение:
.fadeOut(options);
Такой объект может передавать следующие
параметры и функции - duration
, easing
,
queue
, specialEasing
, step
,
progress
, complete
, start
,
done
, fail
, always
. Описание
этих параметров вы можете посмотреть для метода
animate
. Например,
установим длительность и функцию плавности:
.fadeOut( {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('?');
});
});