Webdesign, Tutorials und mehr - Webmasterpro.de

Effekte mit jQuery

Dieser Artikel zeigt Ihnen, wie Sie mit jQuery Effekte in Ihre Webseite einbauen. Da in diesem Artikel nicht die grundsätzliche Funktionsweise erklärt wird, verweise ich auf die jQuery Einführung.

Um die Beispiele in diesem Artikel auszuprobieren, benötigen Sie das jQuery Framework (Download Link siehe unten).

Effekte mit jQuery

Um die Möglichkeiten, die jQuery mit sich bringt, relativ einfach zu erklären, baue ich in den folgenden Absatz den jeweiligen Effekt ein:

1
2
3
4
5
6

<a href="#">Auslöser</a>
<p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
   Ut wisi enim ad minim veniam, quis nostrud exerci tatio
</p>

Einfaches Ein- und Ausblenden

1
2
3

$("a").click(function() {
    $("p").show();
});

Klickt man nun auf den Link, wird der Absatz eingeblendet. Analog hierzu funktioniert das Ausblenden.

1
2
3

$("a").click(function() {
    $("p").hide();
});

Um das Ein- bzw. Ausblenden langsamer oder schneller ausführen zu lassen, können Sie den Funktionen den Parameter "slow", "normal", "fast" oder die Dauer der Animation in Millisekunden mitgeben.

Bei show() und hide() ist die Angabe der Geschwindigkeit jedoch optional, d.h. wenn Sie keinen Parameter übergeben, wird der Effekt standardmäßig mit "normaler" Geschwindigkeit ausgeführt.

Mit den oben gezeigten Codestücken können Sie den Absatz nun Einblenden ODER Ausblenden. Um den Link quasi als Schalter zu benutzen, stellt jQuery die toggle()-Funktion bereit, die dafür sorgt, dass der Absatz ein- bzw. ausgeblendet wird, je nachdem ob er derzeit sichtbar oder versteckt ist. Auf das Beispiel bezogen bedeutet das:

$("p").toggle();

Slides

Die Funktionen slideDown() und slideUp() sorgen für einen etwas dynamischeren Effekt. Man kann diese nun einzeln verwenden, oder das Pendant zur bereits vorgestellten toggle()-Funktion: slideToggle().

1
2
3
4
5
6
7

$("a").click(function() {
    $("p").slideDown("fast");
        oder
    $("p").slideUp("fast");
        oder
    $("p").slideToggle("fast");
});

Fades

Die Fading-Funktionen von jQuery ermöglichen ein dezentes Einblenden bzw. Ausblenden, indem sie stufenweise die Transparenz des Absatzes verändern.

1
2
3
4
5

$("a").click(function() {
    $("p").fadeIn("slow");
        oder
    $("p").fadeOut("normal");
});

Um benutzerdefinierte Transparenz-Werte zu verwenden, gibt es die fadeTo()-Funktion.

$("p").fadeTo("slow",0.50);

Sehen wir uns nun den Funktionsaufruf etwas genauer an. Der erste Parameter definiert die Geschwindigkeit des Effekts (siehe oben), der zweite Parameter ist hier der Entscheidende. Mit ihm übergeben wir den Transparenzwert (engl. opacity), den das Element nach dem Effekt erhalten soll. Dieser Wert sollte zwischen 0 (unsichtbar) und 1 (sichtbar) liegen. In unserem Beispiel ist der Absatz nach dem Aufruf nur noch zur Hälfte (50% = 0.50) sichtbar.

Benutzerdefiniertes Animieren von Elementen

Natürlich unterstützt jQuery nicht nur die Standardeffekte, sondern enthält auch Bordmittel, die es ermöglichen Elemente komplett nach Ihren Wünschen zu animieren.

Lassen Sie mich Ihnen die Tragweite dieser Funktion anhand eines Beispiel erklären:

1
2
3
4
5
6
7

$("a").click(function() {
    $("p").animate({
        marginTop: "50px",
        fontSize: "30px",
        opacity: "0.5"
    }, 1000);
});

Die Funktion zur benutzerdefinierten Animation heißt animate(). Als 1. Parameter übergeben wir der Funktion ein Objekt, in dem festgehalten wird, wie der Absatz nach dem Effekt aussehen soll. Konkret: Der Außenabstand nach oben soll 50px betragen, die Schriftgröße soll auf 30px vergrößert werden und der Absatz soll halb-transparent erscheinen. Der 2. Parameter legt fest, wie lange die Animation in ms (Millisekunden) dauern soll, in unserem Fall 1000ms (1s).

Wie Sie vielleicht bereits erkannt haben, werden als Optionsschlüssel (marginTop, fontSize, opacity) die CSS-Eigenschaften benutzt.

Abschlussbemerkungen

(1) Alle hier vorgestellten Funktionen (außer toggle()) können als letzten Parameter eine Callback-Funktion erhalten, die nach der Animation ausgeführt wird.

1
2
3
4
5

$("a").click(function() {
    $("p").slideDown("fast",function() {
        alert("Fertig!");
    });
});

(2) Mit der Funktion stop() können Sie alle Effekte, die gerade laufen und auf ein Element bezogen sind, abbrechen. Im folgenden Beispiel werden alle Effekte die auf den Absatz ("p") bezogen sind, bei einem Klick auf den Link beendet.

1
2
3

$("a").click(function() {
    $("p").stop();
});

Zusammenfassung

* Von eckigen Klammern umgebene Parameter sind optional ; cb = Callbackfunktion

¹ Die Optionen werden als Objekt übergeben.

Links

• jQuery Effects (engl. Dokumentation)
• jQuery Downloadseite
• jQuery Einführung (Selektoren) auf Webmasterpro

Kommentare: Effekte mit jQuery

Neuen Kommentar schreiben

Beispiele

Beantworten

Anschauungsmaterial zu den Beispielen wäre noch super!
Sonst aber danke :-)

Phil Foreman am 19.08.2008 um 15:22

Mootools

Beantworten

Da ich selbst bei all meinen Projekten Mootools verwende, wg. der schönen Slimbox, würde mich ein ähnliches Tutorial sehr interessieren - ansonsten sehr schön!!

Benutzer gelöscht am 16.08.2008 um 17:15

Re: Mootools

Beantworten

David hast du dann nicht lust einen ähnlichen Artikel über Mootools zu schreiben?

Fabian Ziegler am 25.08.2008 um 11:15

Re: Mootools

Beantworten

Bin leider nicht wirklich in der Materie - aber vielleicht innerhalb des nächsten Monats, beginne selbst grade erst individuelle Animationen und Funktion über Mootools zu erstellen.

Benutzer gelöscht am 25.08.2008 um 16:59