CSS, HTML und Javascript mit {stil}

jQuery Animationen und Effekte

jQuery macht Javascript effizienter

Javascript Animationen sind nicht nur simple Effekte – sie vereinfachen das Verständnis der Benutzerführung, aber Javascript-Animationen mit Timern und Intervallen sind umständlich.

jQuery versteckt die Komplexität von Animationen hinter einer einfachen Schnittstelle und bringt fertige Animationen mit: die subtilen jQuery-Effekte.

jQuery ist schnell zum legitimen Nachfolger von Adobe Flash emporgestiegen. Aus Slideshows, Galerien, weichem Scrollen, responsiven Menüs und Accordion-Animationen für die Navigation ist jQuery kaum wegzudenken, auch wenn die modernen Browser mit purem Javascript einen großen Schritt in Richtung Konsistenz und Zuverlässigkeit gemacht haben.

Mit kaum mehr als zwei drei Zeilen Script verlangsamt jQuery Effekte, die wir aus HTML und CSS kennen – display:none und display:block.

  • fadeIn()
  • fadeOut()
  • fadeTo()
  • fadeToggle()
  • show()
  • hide()
  • slideDown()
  • slideUp()
  • slideToggle()
  • toggle()

jQuery-Effekte werden mit einem Event und einer Callback-Funktion aufgerufen, das hält den Scriptcode zusammen und gut lesbar.

                 +-- Event ohne 'on'-Präfix
                 |
                 |           +-- Callback-Funktion
                 |           |
$('.overlay').mouseover (function () {
	$('.caption').fadeIn('slow');
});
obstkoerbchen
Trauben, die ess ich gern, das kannst du glauben, süßer als Mandelkern schmecken die Trauben.
<div class="hidenshow">
   <img src="obstkoerbchen.png" width="340" height="339" alt="obstkoerbchen">
   <div class="overlay"></div>
   <div class="caption">Trauben, die ess ich gern, ….</div>
</div>
$('.caption').hide();

$('.overlay').mouseover (function () {
	$('.caption').fadeIn('slow');
});
$('.overlay').mouseout (function () {
	$('.caption').fadeOut('slow');
});

jQuery show und hide, fadeIn und fadeOut machen zunächst nichts anderes als die CSS-Regeln caption { display: none; } und caption { display: block; } – sie blenden ein Element aus oder ein.

Erst die Übergabe von Parametern wie slow, normal, fast oder die Angabe von Millisekunden (1000 Millisekunden = 1 Sekunde) bringt die Effekte ein.

slideUp, slideDown

Bei show() und hide() entwickelt sich die Animation zur linken oberen Ecke.

slideUp() und slideDown() vergrößern das Element auf 100% und verkleinern es auf 0.

jQuery slideUp slideDown
slideUp, slideDown
<div class="upndown">
   <img src="slide.png" width="300" height="215" alt="" />
   <div class="slider">slideUp, slideDown</div>
</div>
$('.slider').mouseenter(function () {
	$('.upndown img').slideDown('slow');
});

$('.upndown').mouseleave(function () {
	$('.upndown img').slideUp('slow');
});

Die einfachen Animations-Effekte in jQuery sind oft Teil einer komplexeren Kette. Dafür hat jQuery Methoden zur Steuerung des Ablaufs.

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

Die »Urformen« der jQuery-Effekte können wir heute auch mit CSS-Transition und CSS-Keyframe-Animationen durchführen. Obwohl Javascript große Schritte gemacht hat: Die Eleganz der kleinen Effekte mit jQuery ist nicht einfach zu ersetzen.

Aufwändige Effekte mit natürlichen Bewegungsmustern hingegen (Bounce, Ease-In, Ease-Out) und komplexe Aufgaben für die Benutzerschnittstelle wie Pause, Rewind und Stop sind effizienter und zuverlässiger, wenn Javascript bzw. jQuery eingesetzt wird.

jQuery animate()

jQuery animiert CSS-Eigenschaften eines Elements, die sich durch einen numerischen Wert ausdrücken lassen. width, height, opacity, margin – das sind Eigenschaften mit einem numerischen Wert – position: relative hingegen ist eine keine Eigenschaf mit einem numerischen Wert.

Die Syntax für Animationen ist

$("element").animate({"CSS-Eigenschaft": "Wert"}, Geschwindigkeit, callbackFunction);
Die optionale Callback-Funktionen wird ausgeführt, sobald der Effekt beendet wurde.

Mit der jQuery-Methode animate() lassen sich CSS-Eigenschaften eines Elements animieren – z.B. die Position, um das Element zu verschieben und die Eigenschaft width, um das Element gleichzeitig zu vergrößern oder verkleinern. Das Schöne daran ist, dass die Animation nicht in allen Schritten gleich schnell abläuft, sondern dass animate() das animierte Element langsam anstößt und dann die Animation beschleunigt.

SchuleSpringseileBälleWundertütenSchultaschenKleine BälleGroße Bälle

Wenn mehr als eine CSS-Eigenschaft angegeben wird, werden alle Eigenschaften gleichzeitig animiert. Damit zwei oder mehr CSS-Eigenschaften nacheinander animiert werden, wird animate() mehrfach aufgerufen.

<div class="sl-row">
   <div class="sl-menu">
   …
   </div>
   <div class="sl-content">
      <button class="button" id="slb">Click me</button></div>
      …
   </div>
</div>
$('#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({"margin-left":"200px", "width": $('#sl-row').width - 180 + "px"},1000); animiert margin-left und width gleichzeit
  • $('.sl-menu').animate({"height":"300px"},1000, function () {} ) Am Ende der zweiten Animation ändert eine Callback-Funktion den Text im Button.
  • Der else-Zeit führt bringt die Elemente zurück in den Anfangszustand

Alles in Allem eine ausgesprochen einfache und überschaubare Animation. Weil die Animation so langsam abläuft, ist gut zu sehen, dass die Bewegung langsam startet, beschleunigt und am Ende wieder abbremst.

Dieses Konzept (»Easing«) kennen wir heute aus der transition-timing-function von CSS Transition, aber in Animationen mit Javascript muss das Easing für natürliche Bewegungsmuster manuell programmiert werden.