Усули fadeToggle

Усули fadeToggle ба тартиб унсурҳоро мулоим намоиш дода ё пинҳон карда, шаффофияти онҳоро аниматсия мекунад.

Синтаксис

Намоиш/пинҳон кардан барои вақти муайянкардашуда, 400мс ба сурати пешфарз:

javascript.fadeToggle(дарозӣ);

Вақтро на танҳо дар миллисония, балки бо калимаҳои калидӣ slow (600мс) ва fast (200мс) низ муайян кардан мумкин аст, қимати бузургтар аниматсияро сусттар мекунад:

javascript.fadeToggle('slow' ё 'fast');

Агар параметрҳоро муайян накунед - аниматсия вуҷуд надорад, унсурҳо ба ҳоли фаврӣ намоиш/пинҳон мешаванд:

javascript.fadeToggle();

Инчунин метавон ба воситаи параметри дуюм функсияи мулоимиро, ва ба воситаи параметри сеюм callback-функсияро интиқол дод - пас аз иҷрои аниматсия фаъол мешавад. Ҳарду параметр ихтиёрӣ мебошанд:

javascript.fadeToggle(дарозӣ, [функсияи мулоимӣ], [callback-функсия]);

Ба усул гуногунии хосиятҳоро метавон интиқол дод, дар шакли объекти JavaScript, ки дорои ҷуфтҳои калид: қимат мебошад:

javascript.fadeToggle(options);

Чунин объект метавонад параметрҳо ва функсияҳои зеринро интиқол диҳад - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Тавсифи ин параметрҳоро шумо метавонед барои усули animate бубинед. Масалан, дарозӣ ва функсияи мулоимиро муқаррар мекунем:

javascript.fadeToggle( {duration: 800, easing: easeInSine} );

Намуна

Дар намунаи зерин дар вақти нахостин пахш кардани тугмаи #toggle унсури бо #test пинҳон карда мешавад, ва дар вақти такрори - намоиш дода мешавад. Барои ин мо усули fadeToggle истифода мебарем. Ҳамчунин мо суръати 1000мс ва қимати функсияи мулоимиро ба linear муқаррар мекунем:

html<button id="toggle">toggle</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

Ҳамчунин бубинед