Метад 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. Апісанне
гэтых параметраў вы можаце паглядзець для метаду
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('?');
});
});
