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 Methodeanimate() für die Erstellung eigener Animationen bereit.http://docs.jquery.com/Effects/animate
