Effekte mit jQuery

2 | 4 Kommentare | 19558 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Effekte mit jQuery" mit Ihrem Wissen!

Anzeige Hier werben

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:

Testabsatz  
HTML
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

 
JavaScript
1
2
3
$("a").click(function() {
    $("p").show();
});

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

 
JavaScript
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.

Alle Effekt-Funktionen von jQuery können mit dem Parameter beeinflusst werden, deshalb werde ich in den weiteren Abschnitten nicht weiter auf diesen hinweisen.

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().

 
JavaScript
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.

 
JavaScript
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:

 
JavaScript
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.

Beachten Sie, dass bei den CSS-Eigenschaften der Bindestrich weggelassen wird.

Beispiel: backgroundColor statt background-color

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.

Beispiel mit Callback-Funktion  
JavaScript
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.

Beispiel mit stop()  
JavaScript
1
2
3
$("a").click(function() {
    $("p").stop();
});

Zusammenfassung

Syntax*
Aufgabe
show([geschwindigkeit],[cb])
Anzeigen
hide([geschwindigkeit],[cb])
Verstecken
toggle()
Anzeigen bzw. Verstecken
slideDown(geschwindigkeit,[cb]) Herunterfahren
slideUp(geschwindigkeit,[cb])
Herauffahren
slideToggle(geschwindigkeit,[cb]) Herunter- bzw. Herauffahren
fadeIn(geschwindigkeit,[cb]) Einblenden
fadeOut(geschwindigkeit,[cb]) Ausblenden
fadeTo(geschwindigkeit,transparenz,[cb])
Benutzerdefiniertes Faden
animate(optionen1,dauer)
Benutzerdefinierte Animation
stop()
Abbrechen der Effekte

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

1 Die Optionen werden als Objekt übergeben.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Effekte mit jQuery" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Effekte mit jQuery" hier bearbeiten.

Mitarbeiter

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