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('?');
});
});
