Метод fadeToggle
Метод fadeToggle элементларни навбатма-навбат муносаб равишда
кўрсатади ёки беркитади, уларнинг шaffофлигини анимация килади.
Синтаксис
Берилган вақт давомида кўрсатиш/беркитиш,
сунуий холда 400мс:
.fadeToggle(давомийлик);
Вақтни факат миллисонияларда эмас, балки калит сўзлар
slow (600мс)
ва fast (200мс) билан хам белгилаш мумкин, қиймат катта бўлса,
анимация секинрок бўлади:
.fadeToggle('slow' ёки 'fast');
Агар параметрларни кўрсатмасангиз - анимация бўлмайди, элементлар бир дақиқада кўриниб/йўқолади:
.fadeToggle();
Шунингдек, иккинчи параметр сифатида муносаблик функциясини, ва унинчи параметр сифатида эса callback-функцияни - анимация тугаганидан кейин ишлайди. У иккала параметр ихтиёрий:
.fadeToggle(давомийлик, [муносаблик функцияси], [callback-функция]);
Методга турли хил опцияларни бериш мумкин, JavaScript объекти шаклида, ичида калит: қиймат жуфтлари:
.fadeToggle(options);
Бундай объект куйидаги
параметрлар ва функцияларни ўтказиши мумкин - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Бу
параметрларнинг тавсифини сиз метод учун
animate да кўра оласиз. Масалан,
давомийлик ва муносаблик функциясини ўрнатамиз:
.fadeToggle( {duration: 800, easing: easeInSine} );
Мисол
Куйидаги мисолда тугмани биринчи марта босганда
#toggle элемент #test билан
беркитилади, ва кайта босилганда - кўрсатилади. Буни
учун биз fadeToggle методдан фойдаланамиз. Шунингдек
биз тезликни 1000мс га ва
муносаблик функциясининг қийматини linear га ўрнаймиз:
<button id="toggle">toggle</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#toggle').on('click', function() {
$('#test').fadeToggle(1000, 'linear');
});
Шунингдек кўринг
-
метод
slideToggle,
элементларни муносаб кўрсатиш/беркитишни алмаштиради -
метод
fadeTo,
элементларнинг шaffофлигини ўзгартиради -
метод
toggle,
элементларни муносаб кўрсатиш/беркитишни алмаштиради -
метод
animate,
элементлар хоссаларини анимация килади