Methode fadeTo

Die Methode fadeTo ändert sanft die Transparenz eines Elements auf einen angegebenen Wert, im Bereich von 0 bis 1.

Syntax

Dauer und Transparenz werden bei jeder Verwendungsvariante der Methode angegeben. Änderung der Transparenz über eine bestimmte Zeit, standardmäßig 400ms:

javascript.fadeTo(Dauer, Transparenzwert);

Die Zeit kann nicht nur in Millisekunden angegeben werden, sondern auch mit den Schlüsselwörtern slow (600ms) und fast (200ms), je größer der Wert, desto langsamer die Animation:

javascript.fadeTo('slow' oder 'fast', Transparenzwert);

Optional kann als dritter Parameter auch eine Callback-Funktion übergeben werden - wird nach Abschluss der Animation ausgeführt:

javascript.fadeTo(Dauer, Transparenzwert, [Callback-Funktion]);

Es können auch eine Easing-Funktion und eine Callback-Funktion übergeben werden (optionale Parameter) - wird nach Abschluss der Animation ausgeführt:

javascript.fadeTo(Dauer, Transparenzwert, [Easing-Funktion], [Callback-Funktion]);

Beispiel

Im folgenden Beispiel wird mit der Methode fadeTo beim Klicken auf die Schaltfläche #hide das Element mit #test ausgeblendet, indem die Transparenz auf 0.5 verringert wird, und bei #show - eingeblendet:

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);
});

Siehe auch