Metoden fadeTo

Metoden fadeTo ändrar mjukt opaciteten för ett element till ett angivet värde, i intervallet från 0 till 1.

Syntax

Varaktighet och opacitet anges i alla användningsfall för metoden. Ändring av opacitet under en given tid, 400ms som standard:

javascript.fadeTo(varaktighet, opacitetsvärde);

Tiden kan anges inte bara i millisekunder, utan också med nyckelorden slow (600ms) och fast (200ms), ju högre värde, desto långsammare animation:

javascript.fadeTo('slow' eller 'fast', opacitetsvärde);

Man kan också som en tredje (valfri) parameter skicka en callback-funktion - utlöses efter att animationen är klar:

javascript.fadeTo(varaktighet, opacitetsvärde, [callback-funktion]);

Man kan också skicka en easing-funktion och en callback-funktion (valfria parametrar) - utlöses efter att animationen är klar:

javascript.fadeTo(varaktighet, opacitetsvärde, [easing-funktion], [callback-funktion]);

Exempel

I följande exempel, med hjälp av metoden fadeTo vid klick på knappen #hide kommer elementet med #test att döljas genom att minska opaciteten till 0.5, och vid klick på #show - att visas:

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 även