Methode fadeIn
Die Methode fadeIn blendet versteckte
Elemente sanft ein, indem sie sie undurchsichtig macht. Verstecken
kann man Elemente mit der Methode
fadeOut,
indem man sie durchsichtig macht.
Syntax
Einblenden über eine bestimmte Zeit,
standardmäßig 400ms:
.fadeIn(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:
.fadeIn('slow' oder 'fast');
Wenn keine Parameter angegeben werden - erfolgt keine Animation, die Elemente werden sofort eingeblendet:
.fadeIn();
Man kann als zweiten Parameter auch eine Beschleunigungsfunktion übergeben, sowie als dritten einen Callback - wird nach Abschluss der Animation ausgeführt. Beide Parameter sind optional:
.fadeIn(Dauer, [Beschleunigungsfunktion], [Callback-Funktion]);
Man kann der Methode verschiedene Optionen übergeben, in Form eines JavaScript-Objekts, das Schlüssel: Wert-Paare enthält:
.fadeIn(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:
.fadeIn( {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 beim Klick auf die 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('?');
});
});
