JavaScript Text ausblenden / Fade out

Wenn einem die eigene Webseite etwas zu langweilig wird, kann man Effekte hinzufügen. Sehr beliebt ist beispielsweise das Fade-in bzw Fade-out von Text und Containern. Die gängigen JavaScript-Frameworks wie beispielsweise die MooTools oder jQuery bieten hierfür bereits die vorgefertigte Funktionen an. Man muss nur herausfinden, wie man diese Effekte programmiert bzw. verwendet. Die einfachste Lösung ist natürlich, sich erstmal die Demoseiten der Frameworks anzusehen. Dort kann man die einzelnen Funktionsweisen der Effekte direkt am Beispiel erleben und den funktionierenden Quelltext analysieren, um dann ein eigenes Script zu programmieren.

Vor Kurzem hatte ich das Vergnügen, zwei unterschiedliche Seiten zu "pimpen". Bei der einen sollte eine Art Pressespiegel in Jahre aufgeteilt werden, so dass nur noch die Jahreszahlen auftauchen und bei einem Klick auf die Jahre die jeweilige Übersicht schön aufklappt. Diesen Effekt erreicht man am einfachsten über die MooTools mit Fx.Slide. Ich spare mir an dieser Stelle mal ein Beispiel und verlinke einfach mal die Demoseite für Fx.Slide.

Die zweite Variante ist ein sanftes Einfaden bzw Ausfaden eines Textes oder eines Containers. Dies lässt sich ziemlich einfach mit jQuery programmieren. Die gesuchten Funktionen lauten hier "fadeIn()" und "fadeOut()". Btw: auch jQuery bietet Sliding ("slideUp()", "slideDown()", "slideToggle()").

Sehr interessant in diesem Zusammenhang ist natürlich das sog. Chaining. Man kann Effekte oder Funktionsaufrufe allgemein auch nacheinander ausführen. Die Ansatzweise der MooTools ist hier etwas anders als bei jQuery. Bei den MooTools wird hier an die erste Funktion jeweils ein .chain(nächsteFunktion) angehängt. Bei jQuery gibt es hierfür die sog. Callback-Funktionen, die bei Beendigung der laufenden Funktion aufgerufen werden. Im Grunde also das Gleiche - nur die Schreibweise ist anders.