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