Метод fadeOut
Метод fadeOut постељено сакрива
елементе. Приказати елементе можете помоћу метода
fadeIn,
чинећи их непровидним.
Синтакса
Приказ за задато време,
400ms подразумевано:
.fadeOut(трајање);
Време можете задати не само у милисекундама,
већ и кључним речима slow (600ms)
и fast (200ms), што је већа вредност,
то спорија анимација:
.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. Такође ћемо поставити
брзину на 1000ms:
<button id="hide">сакриј</button>
<button id="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">сакриј</button>
<button id="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('?');
});
});
