Metoden fadeToggle

Metoden fadeToggle vekselvis viser eller skjuler elementer jevnt ved å animere deres gjennomsiktighet.

Syntaks

Vis/skjul over en gitt varighet, 400ms som standard:

javascript.fadeToggle(varighet);

Tid kan angis ikke bare i millisekunder, men også med nøkkelordene slow (600ms) og fast (200ms), jo høyere verdi, desto tregere animasjon:

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

Hvis du ikke angir parametere - vil animasjonen ikke skje, elementene vil vises/skjules umiddelbart:

javascript.fadeToggle();

Du kan også sende en easing-funksjon som andre parameter, samt en tredje callback-funksjon - som utløses etter at animasjonen er fullført. Begge parameterne er valgfrie:

javascript.fadeToggle(varighet, [easing-funksjon], [callback-funksjon]);

Du kan sende metoden ulike alternativer, i form av et JavaScript-objekt som inneholder par nøkkel: verdi:

javascript.fadeToggle(alternativer);

Et slikt objekt kan sende følgende parametere og funksjoner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelse av disse parameterne kan du se for metoden animate. For eksempel, la oss sette varighet og easing-funksjon:

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

Eksempel

I følgende eksempel, ved første klikk på knappen #toggle vil elementet med #test skjules, og ved gjentatt klikk - vises. For dette bruker vi metoden fadeToggle. Også setter vi hastigheten til 1000ms og verdien for easing-funksjonen 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å