Методот fadeOut
Методот fadeOut постечно ги скрива
елементите. Елементите може да се прикажат со методот
fadeIn,
правејќи ги непровидни.
Синтакса
Приказ за зададено време,
400ms по основно:
.fadeOut(времетраење);
Времето може да се зададе не само во милисекунди,
туку и со клучни зборови slow (600ms)
и fast (200ms), колку е поголема вредноста,
толку е побавна анимацијата:
.fadeOut('slow' или 'fast');
Ако не се наведат параметри - нема да има анимација, елементите ќе се сокријат моментално:
.fadeOut();
Може исто така како втор параметар да се пренесе функција за забавување, а како трет callback-функција - ќе се активира по извршувањето на анимацијата. Двата параметри не се задолжителни:
.fadeOut(времетраење, [функција за забавување], [callback-функција]);
На методот може да се пренесат различни опции, во форма на JavaScript објект, кој содржи парови клуч: вредност:
.fadeOut(опции);
Ваквиот објект може да пренесува следните
параметри и функции - 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">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('?');
});
});
