Метод fadeToggle

Метод fadeToggle наизменично глатко приказује или сакрива елементе, анимирајући њихову провидност.

Синтакса

Приказивање/сакривање у задатом времену, 400ms подразумевано:

javascript.fadeToggle(трајање);

Време се може задати не само у милисекундама, већ и кључним речима slow (600ms) и fast (200ms), што је већа вредност, то је спорија анимација:

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. Такође поставићемо брзину на 1000ms и вредност функције убрзања на 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');
});

Види још