Methode fadeOut
Die Methode fadeOut blendet Elemente
sanft aus. Elemente können mit der Methode
fadeIn
wieder eingeblendet werden, indem sie undurchsichtig gemacht werden.
Syntax
Ausblenden über eine bestimmte Zeit,
standardmäßig 400ms:
.fadeOut(Dauer);
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:
.fadeOut('slow' oder 'fast');
Wenn keine Parameter angegeben werden - erfolgt keine Animation, die Elemente werden sofort ausgeblendet:
.fadeOut();
Als zweiten Parameter kann eine Beschleunigungsfunktion übergeben werden, und als dritter Parameter ein Callback - wird nach Abschluss der Animation ausgeführt. Beide Parameter sind optional:
.fadeOut(Dauer, [Beschleunigungsfunktion], [Callback-Funktion]);
Der Methode können verschiedene Optionen übergeben werden, in Form eines JavaScript-Objekts, das Schlüssel: Wert-Paare enthält:
.fadeOut(Optionen);
Ein solches Objekt kann die folgenden
Parameter und Funktionen übergeben - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Die Beschreibung
dieser Parameter können Sie für die Methode
animate nachlesen. Zum Beispiel,
legen wir Dauer und Beschleunigungsfunktion fest:
.fadeOut( {duration: 800, easing: easeInSine} );
Beispiel
Im folgenden Beispiel wird beim Klick auf die Schaltfläche
#hide das Element mit #test
mit der Methode fadeOut ausgeblendet,
und bei der Schaltfläche #show - eingeblendet, mit
fadeIn. Wir setzen die
Geschwindigkeit auf 1000ms:
<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').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Beispiel
Im folgenden Beispiel geben wir nach Abschluss
der Animation beim Einblenden des Elements #test eine
Nachricht
mit dem Text '!' aus, und beim Ausblenden
mit dem Text '?':
<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').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
