jQuery animate, hide, show – Effekte und Animationen

jQuery-Effekte und Animationen

Javascript Animationen wie show, hide, slideDown und slideUp waren immer mehr als nur simple Effekte: Sie vereinfachen das Verständnis für die Benutzerführung und bieten dem Betrachter eine kleine Überraschung.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

jQuery vs Vanilla Javascript

Aus Slideshows, Galerien, weichem Scrollen, responsiven Menüs und all den kleinen Animationen für die Navigation war jQuery für viele Jahre kaum wegzudenken. jQuery versteckt die Komplexität von Animationen hinter einer einfachen Schnittstelle und bringt fertige Animationen mit: die subtilen jQuery-Effekte.

Heute bewerkstelligen die modernen Browser dank querySelector mit reinem Javascript (auch als "Vanilla Javascript" bezeichnet) oder einfach mit CSS-Animationen diese Effekte auch ohne den Einsatz von jQuery.

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 Unterschiede und Bugs der Browser egalisiert, Javascript ist standardisierter (sprich: verlässlicher) und CSS hat Effekte mit Siebenmeilenstiefeln 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 jQuery-Effekte lassen sich problemlos durch CSS ersetzen. Mit dem Abgang von IE11 unterstützen die Browser die eleganten jQuery-Methoden wie closest, after, before, replaceWith mit nativen JavaScript.