CSS, HTML und Javascript mit {stil}

jQuery Animationen und Effekte

jQuery Animation

jQuery animate() animiert jede CSS-Eigenschaft, die sich durch einen numerischen Wert ausdrücken läßt und kann mehrere Eigenschaften mit einem einzigen Aufruf animieren.

width, height, opacity, margin sind Eigenschaften mit einem numerischen Wert – position: relative hingegen ist eine keine Eigenschaft mit einem numerischen Wert.

Die Syntax für Animationen ist

$("element").animate(
   {"eigenschaft": "Wert"},
   Dauer, 
   Geschwindigkeit, 
   callbackFunction);

jQuery Callback-Funktionen und Loops

Alle Animations-Methoden von jQuery bieten eine Callback-Funktion als optionales Argument nach der Dauer bzw. Geschwindigkeit. Die Callback-Funktionen wird ausgeführt, sobald der Effekt beendet ist, und kann auch weitere Animationen starten, so dass eine Sequenz oder Kette von Animationen entsteht.

.simple {position: relative; overflow: hidden; }
.square { position: absolute; bottom: -200px; }

function loop() {
     $('.square').animate (
        {bottom: "200px"},     // Eigenschaft
        4000,                  // Dauer
        'swing',               // Geschwindigkeit
        function() {           // Callback
           loop()
        }
     );
     $('.square').css({bottom: "-200px"}); // zurück in den Anfangszustand
}
loop();

In diesem Beispiel ruft die Callback-Funktion sich selber auf, so dass die jQuery-Animation in einem Loop – einer Schleife – abläuft.

jQuery Easing für Animationen

Die Easing-Funktionen steuern die Geschwindigkeit über die Dauer der Animation. Von Haus aus kommt jQuery mit zwei Easing-Funktionen: linear (zu jedem Zeitpunkt gleich schnell) und swing (start und endet langsamer).

Für weitere Easing-Effekte in jQuery muss jQuery UI für Effekte (Effects Core) eingebunden werden.

function loopease() {
     $('.square2').animate (
          {bottom: "220px"},
          { duration: 3000,
               easing: 'easeOutBounce',
               complete: function () {
               loopease();
          }
     });
     $('.square2').css({bottom: "-200px"});
}
loopease();

jQuery animate() für komplexe Abläufe

Wird mehr als eine CSS-Eigenschaft angegeben, animiert jQuery alle Eigenschaften gleichzeitig.

$('#elem').animate ({
      eigenschaft1: Wert1,
      eigenschaft2: Wert2,
      ...
});
SchuleSpringseileBälleWundertütenSchultaschenKleine BälleGroße Bälle 
$('#slb').click(function() {
   if ($('#slb').html() == 'Click me') {
      $('.sl-content').animate(
         {"margin-left":"200px", 
          "width": $('#sl-row').width - 180 + "px"},
          1000);
      $('.sl-menu').animate(
         {"height":"300px"},1000, function () {
            $('#slb').html('close me');
            $('#slb').addClass('sl-small'); 
         });
   } else {
      $('.sl-content').animate(
         {"width":"100%", 
          "margin-left":"0"},
          1000);
      $('.sl-menu').animate(
         {"height":"0"},1000, function() {
            $('#slb').html('Click me');
            $('#slb').removeClass('sl-small');
         }
      );
   }
});
  • $('.sl-content').animate() animiert margin-left und width gleichzeitig.
  • $('.sl-menu').animate() animiert height.
  • Am Ende der zweiten Animation ändert die Callback-Funktion function (){} den Text im Button.
  • Der else-Zweig führt die Elemente zurück in den Anfangszustand.

jQuery Animation Chain

Die einfachen Animations-Effekte in jQuery sind oft Teil einer komplexeren Kette.

  1. Aneinanderhängen von Methoden (method chaining): object.method1().method2().method3()
  2. Mittels Callback-Funktionen, die am Ende eines Effekts ausgeführt werden
  3. Die Methode queue() bildet eine weitere Möglichkeit, Animationen in einer Kettenreaktion durchzuführen.

Dafür hat jQuery Methoden zur Steuerung des Ablaufs.

  • delay()
  • dequeue()
  • finish()
  • queue()
  • stop()
Animate