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

Погледнете ги исто така