Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

März 12th, 2010 | von Alexander Trefz | Tutorials, jQuery

Im ersten Teil dieser Tutorial-Serie haben wir gelernt, wie man ein <div> ausblenden kann, heute werden wir deutlich tiefer in das Gebiet der Animationen einsteigen. Wir werden lernen wie man mit den slide-Methoden umgeht, was die animate-Methode ist und ausßerdem ihre Möglichkeiten kennenlernen.

Ziel

In diesem Tutorial werde ich euch die slide- fade- und animate-Methoden vorstellen. Außerdem werde ich zeigen, wie ihr ganz eigene Animationen erstellt.

Frühere Teile dieser Serie
Vorraussetzungen
  • Grundkenntnisse (X)HTML
  • Grundkenntnisse CSS

Die fade-Methode

Im letzten Teil dieser Serie haben wir fadeOut kennengelernt. Diese Methode besitzt ein Äquivalent mit dem Namen fadeIn, wie der Name schon sagt, blendet diese Methode ein ausgeblendetes Element wieder ein. Die Syntax ist die selbe wie jene von fadeOut. Beide Methoden akzeptieren auch noch einen zweiten Parameter, welcher jedoch optional ist, weshalb wir ihn im ersten Teil vernachlässigen konnten. Dieser optionale Übergabewert ist ein Callback. Das heißt man kann hier eine Funktion übergeben, welche erst dann ausgeführt wird wenn die Animation beendet ist. Das könnte zum Beispiel so aussehen:

1
2
3
$("div").fadeOut(2000, function(){
    alert("Div wurde ausgeblendet!");
});

was nach der Animation einen Dialog mit dem übergebenen Text ausgeben würde.

Die slide-Methode

Die slide-Methoden animieren die Höhe eines Elementes. Mithilfe dieser Methoden kann man Elemente verstecken und wieder anzeigen. Diese Methoden haben alle ein optionales Callback.

slideUp

Mithilfe der slideUp-Methode kann die Höhe eines Elementes, über einen definierten Zeitraum, auf 0 gesenkt werden und das Element somit versteckt werden.

Demo

slideDown

Diese Methode animiert die Höhe eines bereits von der slideUp-Methode versteckten Elementes wieder auf ihren ursprünglichen Wert.

Demo

slideToggle

Diese Methode “toggelt” zwischen slideUp und slideDown. Das heißt: Wenn das Element versteckt ist, ruft es slideDown auf, wenn nicht dann slideUp.

Demo

Die animate-Methode

animate ist die universal-Methode für alle Animationen, man kann mit ihr jede numerische CSS-Eigenschaft animieren. Der zweite Parameter ist wieder die Zeit in Millisekunden.

1
$("div").animate({width: "300px"}, 300);

das würde die Breite über eine Zeit von 300ms auf 300px setzen. Der dritte Parameter ist das so genannte easing. Easing beschreibt verschiedene Funktionen die den Ablauf der Animation verändern. Das heißt das zum Beispiel zu Anfang als auch am Ende der Animation die Geschwindigkeit der Animation verlangsamt wird, um beispielsweise ruckartige Animationen zu vermeiden. Jedoch ist für fast alle easing-Methoden das easing-Plugin erforderlich. Die einzigen beiden easing-Methoden die fest in jQuery integriert sind, nennen sich “linear”, die Standard-Methode, und “swing”. Easing ist optional. In der Demo werde ich das PlugIn verwenden und das folgende Easing nutzen:

1
$("div").animate({opacity: 0}, 200, "easeOutQuint");

Demo

Der vierte Parameter ist das Callback. Das Callback wird genauso aufgerufen wie bei fadeIn/Out oder den slide-Methoden und ist ebenfalls optional. Da das easing optional ist, können wir ihm einen Dummy-Wert übergeben wenn wir es nicht ändern möchten, allerdings muss etwas übergeben werden da das Callback der vierte Parameter sein muss:

1
2
3
$("div").animate({opacity: 0}, 200,"", function(){ // Easing bekommt Dummy übergeben
    alert("Animation beendet.");
});

Mit animate können wir nicht nur zu absoluten Werten animieren, wir können auch relativ zum aktuellen Wert animieren:

1
$("div").animate({width: "+=300px"}, 300);

das würde, im Gegensatz zum vorhergehenden Beispiel, die Breite über 300ms nicht auf 300px setzen, sondern um 300px erhöhen. Wir können auch mehrere Eigenschaften gleichzeitig animieren. Die Syntax sieht dann so aus:

1
2
3
4
$("div").animate({
    width: "+=300px",
    height: "+=200px"
}, 300);

Eigene Animationen

Nun werden wir eine eigene Animation erstellen. Dafür nutzen wir die Quelldateien aus dem ersten Teil von jQuery für Einsteiger. Lediglich den Scriptblock den wir selbst geschrieben haben werden wir editieren. Da wir unsere Animation dann starten wollen wenn auf den Link geklickt wurde, werden wir die Zeile:

1
$("#Fade").fadeOut(3000);

löschen und an dieser Stelle unseren neuen Code einfügen.

Wir werden nun das <div> zuerst um 40px kleiner werden lassen, und danach um 50px nach rechts verschieben. Zunächst möchten wir also Höhe und Breite animieren:

1
2
3
4
$("#Fade").animate({
    width: "-=40px",
    height: "-=40px"
}, 600);

Jetzt fügen wir noch ein Callback ein welches das <div> nach rechts verschiebt. Es existieren verschiedene Möglichkeiten das <div> nach rechts zu verschieben, entweder über “margin-left” oder über “left” in Verbindung mit “position”. Da für “left” jedoch zuerst “position” im CSS gesetzt werden muss, entscheide ich mich in diesem Fall für “margin-left”. Ihr könnt das aber handhaben wie ihr möchtet. Bei Eigenschaften die mit einem Bindestrich getrennt geschrieben werden, wie beispielsweise “margin-left”, gibt es eine Besonderheit: Sie sollten nach folgendem Format geschrieben werden: “marginLeft” oder auch “borderBottom”. Also den ersten Buchstaben des Wortes nach dem Bindestrich groß.

1
2
3
4
5
..
height: "-=40px"
}, 600, "", function(){
    $("#Fade").animate({marginLeft: "+=50px"}, 600);
});

Jetzt sollte unser Script also so aussehen:

1
2
3
4
5
6
$("#Fade").animate({
    width: "-=40px",
    height: "-=40px"
}, 600, "", function(){
    $("#Fade").animate({marginLeft: "+=50px"}, 600);
});

Demo

4 Kommentare

  1. Mac002 sagt:

    Danke für das Tutorial, sehr interessant.
    Allerdings gibt es in diesem Artikel einen kleinen Fehler
    “Ziel

    In diesem Tutorial werde ich euch die slide- fade- und animate-Methoden vorstellen. Außerdem werden ich zeigen, wie ihr ganz eigene Animation erstellt.”

    Ein N zu viel im 2. Satz. :P

    Antworten

  2. Chris sagt:

    Ein bisschen unübersichtlich, aber man versteht es.

    Antworten

  3. anonymous sagt:

    Du sagst nie in >WELCHER< datei, ob javascript.js oder im index.html was gelöscht werden soll.

    Antworten

  4. Lona sagt:

    Hallo !
    Ich habe eine Frage…wie binde ich in eine bestehende Html Seite den Java script code zum ein und ausblenden eines Formulars ein?
    Und hättest du den Code im Angebot,wärest du so nett und würdest mr dazu eine Anleitung geben?
    LG Lona

    Antworten

Hinterlasse einen Kommentar