Metoden fadeTo

Metoden fadeTo ændrer jævnt gennemsigtigheden af et element til en given værdi, i området fra 0 til 1.

Syntaks

Varighed og gennemsigtighed angives ved enhver brug af metoden. Ændring af gennemsigtigheden over en given tid, 400ms som standard:

javascript.fadeTo(varighed, gennemsigtighedsværdi);

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

javascript.fadeTo('slow' eller 'fast', gennemsigtighedsværdi);

Man kan også som tredje (valgfri) parameter overføre en callback-funktion - udføres efter animationen er afsluttet:

javascript.fadeTo(varighed, gennemsigtighedsværdi, [callback-funktion]);

Man kan også overføre easing-funktion og callback-funktion (valgfrie parametre) - udføres efter animationen er afsluttet:

javascript.fadeTo(varighed, gennemsigtighedsværdi, [easing-funktion], [callback-funktion]);

Eksempel

I følgende eksempel, ved hjælp af metoden fadeTo ved at klikke på knappen #hide vil elementet med #test blive skjult ved at reducere gennemsigtigheden til 0.5, og ved #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å