jQuery animate, hide, show – Effekte und Animationen

Die einfachen jQuery-Effekte und Animationen

Javascript Animationen wie show, hide, slideDown und slideUp 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.

jQuery durch Javascript und CSS ersetzen

jQuery wurde 2006 entwickelt, in erster Linie, um die Differenzen zwischen den Browsern auszugleichen. Heute sind die großen Unterschiede und Bugs egalisiert, Javascript ist standardisierter (sprich: verlässlicher) und CSS hat Effekte mit Siebenmeilenstiefel vorgelegt.

Brauchen wir jQuery tatsächlich noch? Viele Projekte setzen so automatisch auf jQuery, ohne zu prüfen, ob es den Aufwand wirklich wert ist: Gerade die einfachen Effekte lassen sich schon einfach mit CSS umsetzen.