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">жасыр</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('?');
});
});
