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