Metoden fadeToggle

Metoden fadeToggle skifter mellem at vise eller skjule elementer jævnt ved at animere deres gennemsigtighed.

Syntaks

Visning/skjuling over en given varighed, standard er 400ms:

javascript.fadeToggle(varighed);

Tid kan angives ikke kun i millisekunder, men også med nøgleordene slow (600ms) og fast (200ms), hvor højere værdi betyder langsommere animation:

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

Hvis parametre ikke angives - vil der ikke være nogen animation, elementer vil blive vist/skjult øjeblikkeligt:

javascript.fadeToggle();

Man kan også sende en easing-funktion som anden parameter, samt en callback-funktion som tredje parameter - den udføres efter animationen er afsluttet. Begge parametre er valgfrie:

javascript.fadeToggle(varighed, [easing-funktion], [callback-funktion]);

Man kan sende metoden forskellige indstillinger, i form af et JavaScript-objekt, der indeholder nøgleværdi-par nøgle: værdi:

javascript.fadeToggle(indstillinger);

Et sådant objekt kan sende følgende parametre og funktioner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelsen af disse parametre kan du se for metoden animate. For eksempel, lad os sætte varigheden og easing-funktionen:

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

Eksempel

I det følgende eksempel vil elementet med #test blive skjult ved første klik på knappen #toggle, og ved det næste klik vil det blive vist. For at gøre dette bruger vi metoden fadeToggle. Vi vil også indstille hastigheden til 1000ms og easing-funktionen til 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');
});

Se også