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