Anstelle von $("#beispiel").css("display", "none") bietet Ihnen jQuery auch an, $("#beispiel").hide() zu notieren, und anstelle von $("#beispiel").css("display", "block") können Sie $("#beispiel").show() verwenden. Die Funktion hide() versteckt ausgewählte Elemente, und show() zeigt versteckte Elemente an.

Ein häufiges Effektmerkmal auf modernen Websites ist jedoch, Inhalte nicht einfach plötzlich und „hart“ ein- und auszublenden, sondern zeitlich wahrnehmbar. Rein CSS-technisch steckt die opacity-Eigenschaft dahinter, mit deren Hilfe sich die Deckkraft eines Elements bestimmen lässt. Indem man diesen Wert in kleinen Schritten im Abstand von wenigen Millisekunden ändert, entstehen sanfte Ein- und Ausblenden. jQuery bringt hierfür ein fertiges Set an Funktionen mit.

Beispiel

<p id="einblend" style="display: none;">Ich werde eingeblendet</p>
<p id="ausblend">Ich werde ausgeblendet</p>
<p id="abblend">Ich werde abgeblendet</p>
<p id="wichtig">Ich mach mich wichtig</p>   
<script>
$(document).ready( function() {   
   $("#einblend").fadeIn();
   $("#ausblend").fadeOut(800);
   $("#abblend").fadeTo("slow", 0.5);
   for(i = 0; i < 10; i++)
      $("#wichtig").fadeToggle(600);   
} );
</script>

Erläuterung

Die jQuery-Funktionen fadeIn() (Einblenden), fadeOut() (Ausblenden), fadeTo() (Ab- oder Aufblenden) und fadeToggle() (Einblenden oder Ausblenden, je nachdem, ob aktuell aus- oder eingeblendet ist) können Sie auf beliebige Selektoren anwenden.

Die Funktionen fadeIn(), fadeOut() und fadeToglle() können Sie in der einfachsten Variante ganz ohne Parameter aufrufen. Dann verwendet jQuery Default-Werte für die Animation. Der Default-Wert zum Ein- und Ausblenden beträgt 400 Millisekunden, also knapp eine halbe Sekunde. Indem Sie als ersten Parameter eine Zahl übergeben, können Sie die Anzahl Millisekunden selbst bestimmen. Im obigen Beispiel werden einmal 800 und einmal 600 Millisekunden für die Dauer des Vorgangs angegeben. Die Funktionen erkennen aber auch die englischen Schlüsselwörter slow (langsam) und fast (schnell) und reagieren darauf wiederum mit voreingestellten Werten.

Bei fadeTo() wird als zweiter Parameter eine Angabe zum Transparenzfaktor (opacity) für den Endzustand erwartet. Es muss sich um einen Wert zwischen 0 und 1 handeln. 0.5 entspricht halb deckend bzw. halb transparent. 1 ist vollständig deckend, und 0 ist vollständig transparent (unsichtbar).

fadeToggle() blendet ein oder aus, abhängig davon, in welchem Zustand sich ein Element gerade befindet. Das obige Beispiel zeigt mittels einer for-Schleife, wie sich dieses Verhalten nutzen lässt, um ein „sanftes“, mehrfaches, aber nicht endloses Blinken zu erzeugen (z.B. für Aufmerksamkeitseffekte, etwa für Fehlermeldungen).

Als dritten Parameter können Sie den fade-Funktionen schließlich noch eine Funktion übergeben, die aufgerufen wird, wenn der Blendvorgang abgeschlossen ist.

Beispiel

<p id="wichtig" style="display: none;">Lesen Sie das!</p>   
<script>
$(document).ready( function() {
   $("#wichtig").fadeIn(3000, function() {
      $(this).html("Haben Sie das gelesen?");
   } );   
} );
</script>

Erläuterung

Das Beispiel blendet den Inhalt des p-Elements mit id="wichtig" im Verlauf von 3 Sekunden (3000 Millisekunden) langsam ein. Als zweiten Parameter bekommt fadeIn() eine anonyme Funktion übergeben. Darin wird mit Hilfe des $(this)-Selektors der HTML-Inhalt des durch den Selektor $("#wichtig") betroffenen Elements geändert. Nachdem der Text Lesen Sie das! also vollständig eingeblendet ist, wird er ersetzt durch Haben Sie das gelesen?.

Wenn Sie bei fadeIn() und fadeOut() mit Parametern arbeiten, können Sie stattdessen auch show() und hide() verwenden – mit den gleichen Parametern! Die Funktionen fadeIn() bzw. show() und fadeOut() bzw. hide() unterscheiden sich nur dann, wenn kein Parameter übergeben wird – nämlich durch die Default-Länge des Blendvorgangs. Bei hide() und show() beträgt er 0, und bei fadeIn() bzw. fadeOut() die schon erwähnten 400 Millisekunden.

Alternativ zu fadeToggle() können Sie auch toggle() verwenden. Auch dabei besteht der Unterschied, wenn kein Parameter übergeben wird, in den 400 Millisekunden des Blendvorgangs gegenüber sofortigem Ein-/Ausblenden.