fadeOut әдісі
fadeOut әдісі элементтерді біртіндеп жасырады.
Элементтерді көрсету үшін fadeIn
әдісін қолдануға болады, ол оларды мөлдір емес етеді.
Синтаксис
Берілген уақыт ішінде көрсету,
әдепкі бойынша 400мс:
.fadeOut(ұзақтығы);
Уақытты тек миллисекундпен емес,
сонымен қатар slow (600мс)
және fast (200мс) кілт сөздерімен де көрсетуге болады,
мән неғұрлым жоғары болса, анимация соғұрлым баяу болады:
.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 көмегімен көрсетіледі.
Сондай-ақ біз жылдамдықты 1000мс деңгейінде орнатамыз:
<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('?');
});
});
