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

Вижте също