Universitätsrechenzentrum
jQuery

Effekte und Animation

Mit der Unterstützung von JavaScript sind eine Reihe von ansprechenden Effekten möglich, welche traditionell mittels Flash implementiert wurden.

Verwende Effekte so, daß die Bedienbarkeit gefördert und nicht behindert wird!

Anzeigen und Verbergen von Elementen

Elemente beim Laden eines Dokuments verbergen: 

<p style="display:none">Dieser Absatz wird nicht angezeigt</p>

hide([speed], [callback])

Die Methode hide() versteckt das ausgewählte Elementset.
Ohne speed -Argument wird die CSS-Eigenschaft display auf none gesetzt. Der Parameter speed kann als Zeitdauer in Millisekunden oder über die Schlüsselworte [slow|normal|fast] definiert werden. Dabei werden über die definierte Zeitdauer die CSS-Eigenschaften opacity und size dekrementiert. 

$("img:first").click(function() {
  $(this).hide("slow");
});

Die optionale callback -Funktion bei Animationsmethoden wird nach Ende der Animation gerufen und enthält den Kontext des animierten Elementes (this).

show([speed], [callback])

Komplementärfunktion zu hide().

toggle([speed], [callback])

Wendet die Methode show() für verborgene Elemente des ausgewählten Elementsets und hide() für dargestellte Elemente an.
Beispiel: Füge vor jeder Tabelle <table> eine <span> -Element der Klasse sh ein. Registriere einen click -Handler auf alle Elemnte der Klasse sh und implementiere die listener -Funktion. 

$("<span class=\"sh\">[-]</span>").insertBefore("table");
$(".sh").click(function() {
  $(this).next("table").toggle();
  ($(this).next("table").is(":hidden") ? $(this).html("[+]") : $(this).html("[-]"));
});

Beachte, dass die Eigenschaft :hidden erst nach Ende einer Animation (toggle("slow")) gesetzt ist. 

$("<span class=\"sh\">[-]</span>").insertBefore("table");
$(".sh").click(function() {
  $(this).next("table").toggle("slow", function() {
    ($(this).is(":hidden") ? $(this).prev(".sh").html("[+]") : $(this).prev(".sh").html("[-]"));
  });
});

Ein- und Ausblenden von Elementen

fadeOut([speed], [callback])

Blendet das ausgewählte Elementset durch Verändern der CSS-Eigenschaften opacity aus und setzt am Ende der Animation die CSS-Eigenschaft display auf none. 

$("img:first").click(function() {
  $(this).fadeOut("slow");
});

fadeIn([speed], [callback])

Komplementärfunktion zu fadeOut().

fadeTo(([speed], opacity, [callback])

Verändert die Deckkraft des ausgewählten Elementset durch Verändern der CSS-Eigenschaften opacity. Die Elemente bleiben auch bei opacity=0 erhalten. 

$("img").click(function() {
  $(this).fadeTo("","0.5");
  $("img").not(this).fadeTo("","1");
});

Animation bei slide -Effekten funktionieren nicht mit allen HTML-Objekten.

slideDown([speed], [callback])

Einblenden verborgener Elemente durch Inkrementieren der Größe (vertikal).

slideUp([speed], [callback])

Ausblenden sichtbarer Elemente durch Dekrementieren der Größe (vertikal). 

($("img:first").is(":hidden") ? $("img:first").slideDown("slow") : $("img:first").slideUp("slow"));

slideToggle([speed], [callback])

Ausblenden sichtbarer Elemente und einblenden verborgener Elemente durch Verändern der Größe (vertikal).

Animation anhalten

stop()

Die Methode stop() hält eine laufende Animation auf dem ausgewählten Elementset an. Die Animation kann durch wiederholten Aufruf der Animationsmethode fortgesetzt werden.

Animation deaktivieren

Animationseffekte können über die globale Einstellung $.fx.off = true; deaktiviert werden.
Damit wird die Dauer von Animationen auf 0 gesetzt.

eigene Animationen

jQuery stellt einen Methode animate() für die Erstellung eigener Animationen bereit.
http://docs.jquery.com/Effects/animate

TUCaktuell