Метад 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('?');
});
});
