Okt 2008
Animationen mit Javascript dienen heute nicht mehr nur der Programmierung hübscher Effekte – an vielen Stellen des Dokuments vereinfachen Animationen das Verständnis der Benutzerführung.
Aber Javascript-Animationen mit Timern und Intervallen sind umständlich.
jQuery steckt die Komplexität der Animationen mit Javascript hinter einer einfachen Schnittstelle und bringt fertige Animation mit: die einfachen jQuery-Effekte
Für viele Webdesigner, die fit in HTML und CSS sind, wird jQuery so zu einer interessanten Alternative oder Ergänzung zu Adobe Flash.
Hier ist etwas Text in einem p-Element mit id="fx"
<script type="text/javascript">
$("button#fxBut").click(function() {
var htmlStr = $(this).html();
if (htmlStr == "Element verbergen" ) {
$("p#fx").hide();
$(this).text("Element zeigen");
} else if (htmlStr == "Element zeigen" ) {
$("p#fx").show();
$(this).text("Element verbergen");
}
});
</script>
Die jQuery-Methoden show() und hide() machen zunächst nichts anderes als die CSS-Regeln p#fx { display: none; } und p#fx { 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. Bei den Methoden show() und hide() entwickelt sich die Animation zur linken oberen Ecke.
<p id="fx2"><img src="musik2.png" … /></p>
…
$("p#fx2").hide("slow");
$("p#fx2").show("slow");
…
</script>
Die Methoden slideDown() und slideUp() verändern die Höhe des Elements bis zur Höhe 0 oder stellen die volle Höhe des Elements wieder her.
Die Syntax für Animationen ist
$("element").animate({ CSS-Eigenschaft: "Wert" (, CSS-Eigenschaft: "Wert")}, Geschwindigkeit, callbackFunction);
Mit der jQuery-Methode animate() lassen sich CSS-Eigenschaften eines Elements animieren – z.B. die Position, um das Element zu verschieben und die Eigenschaft width, um das Element gleichzeitig zu vergrößern oder verkleinern. Das Schöne daran ist, dass die Animation nicht in allen Schritten gleich schnell abläuft, sondern dass animate() das animierte Element langsam anstößt und dann die Animation beschleunigt.
<script type="text/javascript">
$("#musik").click(function() {
var pos = $(this).css("left");
if (pos == "0px") {
$(this).animate({left: "600px", width: "200px"}, 5000);
} else {
$(this).animate({left: "0px", width: "80px"}, 3000);
}
});
</script>
Wenn mehr als eine CSS-Eigenschaft angegeben wird, werden alle Eigenschaften gleichzeitig animiert. Damit zwei oder mehr CSS-Eigenschaften nacheinander animiert werden, wird animate() mehrfach aufgerufen.
$("#musik2").click(function() {
$(this).animate ({ left: "600px", }, 3000);
$(this).animate ({ width: "200px", border: "5px solid tan" }, 2000);
$(this).animate ({ opacity: "0" }, 1000);
$(this).animate ({ left: "0px", opacity: "1" }, 3000);
$(this).animate ({ width: "80px" }, 2000, function() {
$(this).css( "border", "6px solid black" );
});
});
Die CSS-Regel border: "5px solid tan" wird zusammen mit der Regel width: "200px" ausgeführt. Wenn eine CSS-Regel ohne Animation erst ausgeführt werden soll, nachdem eine Animation beendet wurde, ist es Zeit für eine Callback-Funktion. Callback-Funktionen werden ausgeführt, sobald ein Effekt beendet wurde.
function() {
$(this).css( "border", "6px solid black" );
}