Metoda fadeToggle

Metoda fadeToggle afișează sau ascunde alternativ elementele în mod lin, animându-le transparența.

Sintaxă

Afișare/ascundere în timpul specificat, 400ms implicit:

javascript.fadeToggle(durată);

Timpul poate fi specificat nu doar în milisecunde, ci și prin cuvintele cheie slow (600ms) și fast (200ms), cu cât valoarea este mai mare, cu atât animația este mai lentă:

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

Dacă parametrii nu sunt specificați - animația nu va avea loc, elementele se vor afișa/ascunde instantaneu:

javascript.fadeToggle();

De asemenea, ca al doilea parametru poate fi transmisă o funcție de easing, și ca al treilea parametru o funcție callback - se execută după finalizarea animației. Ambii parametri sunt opționali:

javascript.fadeToggle(durată, [funcție de easing], [funcție callback]);

Metodei i se pot transmite diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:

javascript.fadeToggle(opțiuni);

Un astfel de obiect poate transmite următorii parametri și funcții - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Descrierea acestor parametri o puteți vedea pentru metoda animate. De exemplu, să setăm durata și funcția de easing:

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

Exemplu

În exemplul următor, la primul click pe butonul #toggle elementul cu #test va fi ascuns, iar la click repetat - va fi afișat. Pentru asta folosim metoda fadeToggle. De asemenea vom seta viteza la 1000ms și valoarea funcției de easing la 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');
});

Vedeți și