CSS, HTML und Javascript mit {stil}

jQuery Animationen und Effekte

Die einfachen jQuery-Effekte und Animationen

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

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

Aus Slideshows, Galerien, weichem Scrollen, responsiven Menüs und Accordion-Animationen für die Navigation war jQuery kaum wegzudenken, auch wenn die modernen Browser mit querySelector, classList mit reinem Javascript und CSS Transformationen immer näher an jQuery kommen.

jQuery – die einfachen Effekte

Mit kaum mehr als zwei drei Script-Anweisungen verlangsamt jQuery Effekte, die wir aus HTML und CSS kennen – display:none und display:block. Statt ein Element wie einen Lichtschalter ein- und auszuschalten, blendet jQuery Elemente nachvollziehbar ein und aus.

  • Einspielen von oben Rechts show()
  • Verstecken nach oben Rechtshide()
  • Wechsel von Zeigen und Versteckentoggle()
  • Vergrößern von oben MitteslideDown()
  • Verkleinern nach oben MitteslideUp()
  • Vergrößern/Verkleinern im WechselslideToggle()
  • EinblendenfadeIn()
  • AusblendenfadeOut()
  • Ausblenden zu WertfadeTo()
  • Ein-/Ausblenden im WechselfadeToggle()

Effekte, die das Element sichtbar machen, brauchen für den Start display:none.

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

                 +-- Event ohne 'on'-Präfix
                 |
                 |           +-- anonyme Funktion
                 |           |
$('.overlay').mouseover (function () {
	$('.caption').fadeIn('slow');
});
obstkoerbchen
Trauben, ja, die ess ich gern, das kannst du mir 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.

Effekt zurücksetzen

Nichts einfacher als das:

$("#reset").click ( function () {
   $("#icon").removeAttr("style");
});

Beispiel 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 »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.