Metoden fadeTo

Metoden fadeTo endrer jevnt gjennomsiktigheten til et element til en gitt verdi, i området fra 0 til 1.

Syntaks

Varighet og gjennomsiktighet angis med enhver variant av bruk av metoden. Endring av gjennomsiktighet over gitt tid, 400ms som standard:

javascript.fadeTo(varighet, gjennomsiktighetsverdi);

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

javascript.fadeTo('slow' eller 'fast', gjennomsiktighetsverdi);

Man kan også som tredje (valgfri) parameter sende en callback-funksjon - vil utløses etter utførelse av animasjonen:

javascript.fadeTo(varighet, gjennomsiktighetsverdi, [callback-funksjon]);

Man kan også sende en easing-funksjon og callback-funksjon (valgfrie parametere) - vil utløses etter utførelse av animasjonen:

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

Eksempel

I følgende eksempel, ved hjelp av metoden fadeTo ved trykk på knappen #hide vil elementet med #test skjules ved å redusere gjennomsiktigheten til 0.5, og på #show - vises:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
  $('#test').fadeTo(1000, 0.5);
});

Se også