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:

.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:

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

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

.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:

.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:

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

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

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

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

Siehe auch

Methode fadeToggle,
die die Transparenz von Elementen ändert
Methode fadeIn,
die verborgene Elemente sanft einblendet, indem sie undurchsichtig gemacht werden
Methode animate,
die Eigenschaften von Elementen animiert