Методи 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">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('?');
});
});
