jQuery Schnellstart – Animation

Du lernst in dieser Lektion, wie man CSS-Eigenschaften mit jQuery animiert.

animate()-Methode

Die jQuery animate()-Methode wird verwendet, um benutzerdefinierte Animationen zu erstellen.

Sie wird normalerweise verwendet, um numerische CSS-Eigenschaften zu animieren, z.B. Breite, Höhe, Rand, Füllung, Deckkraft, oben, links usw.,

Die nicht-numerischen Eigenschaften wie die Farbe oder Hintergrundfarbe können mit der grundlegenden jQuery-Funktionalität jedoch nicht animiert werden.

Merke: Nicht alle CSS-Eigenschaften sind animierbar. Im Allgemeinen ist jede CSS-Eigenschaft, die Werte in Form von Zahlen, Längen, Prozentsätzen oder Farben akzeptiert, animierbar. Die Farbanimation wird jedoch nicht von der jQuery-Kernbibliothek unterstützt. Um die Farbe zu manipulieren und zu animieren, verwendest du das jQuery-Color-Plugin.

Syntax der animate-Funktion

Die grundlegende Syntax der jQuery animate()-Methode kann mit angegeben werden:

$(Selektor).animate({ Eigenschaften }, Dauer, Callback);

Die Parameter der animate()-Methode haben die folgenden Bedeutungen:

• Der Pflicht-Parameter Eigenschaften (properties) definiert die zu animierenden CSS-Eigenschaften.
• Der optionale Parameter Dauer (duration) gibt an, wie lange die Animation laufen soll. Die Dauer kann entweder mit einem der vordefinierten Strings "slow" oder "fast" oder in einer Anzahl von Millisekunden angegeben werden; höhere Werte bedeuten langsamere Animationen.
• Der optionale Callback-Parameter ist eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist.

Hier ist ein einfaches Beispiel für die jQuery animate()-Methode, die ein Bild durch Klicken auf die Schaltfläche von seiner ursprünglichen Position um 350 Pixel nach rechts  animiert:

<script>
  // Verschiebt das Bild 350 Pixel nach rechts
  $(document).ready(function(){
      $("button").click(function(){
          $("img").animate({
              left: 350
          });
      });
  });
</script>

Mehrere CSS-Eigenschaften gleichzeitig animieren

Du kannst auch mehrere Eigenschaften eines Elements gleichzeitig animieren, indem Du die animate()-Methode verwendest. Alle Eigenschaften werden ohne Verzögerung gleichzeitig animiert.

Hier ein Code-Beispiel:

<script>
// Mehrere CSS-Eigenschaften gleichzeitig animieren
  $(document).ready(function() {
    $("button").click(function() {
        $(".container").animate({
            width: "250px",
            height: "250px",
            marginLeft: "200px",
            opacity: 0.2
        });
    });
  });
</script>

Hinweis: Die Namen der CSS-Eigenschaften müssen camel-cased sein, wenn sie mit der animate()-Methode verwendet werden, z.B. wenn Du die Schriftgröße animieren möchtest, musst Du 'fontSize' statt 'font-size' schreiben. Ebenso schreibst Du 'marginLeft' anstelle von 'margin-left', 'borderWidth' anstelle von 'border-width', und so weiter.

Deine Code-Aufgabe - Jetzt bist du gefragt:

(Die Aufgabenbeschreibung findest du unter dem Code-Editor)

[lp_spoiler title="Komplettlösung anzeigen" class="da"]

Das ist die Komplettlösung:

<script>
  $(document).ready(function(){
      $("#animation").click(function(){
          $("img").animate({
              left: 300
          });
      });
  });
</script>

[/lp_spoiler]

Fazit

Mit der jQuery-Methode animate() bist du in der Lage sämtliche Elemente auf einer Website zu animieren. Dabei ist es möglich, mehrere CSS-Eigenschaften aufeinmal zu animieren. Die Animation ist ein weiteres Werkzeug für eine bessere Interaktivität auf deiner Website. Teste selbst, was du alles animieren kannst.