JQuery Kochbuch (German Edition)

-Element mit der ID
debug
hinzugefügt. In dieses Element fügen wir Log-Meldungen ein, um zu sehen, was gerade geschieht.
    Wir werden den jQuery-Selektor
:animated
nutzen, um zu prüfen, ob die Animation aktuell läuft:
$(document).ready(function () {
var speed = 100;

$('#animate').click(function () {
    $('.box')
     .filter(':not(:animated)')
     .animate({ marginLeft: −10 }, speed, function () {
     $('#debug').append('

Animation startet.

');
     })
     .animate({ marginLeft: 10 }, speed)
     .animate({ marginLeft: −10}, speed)
     .animate({ marginLeft: 10 }, speed)
     .animate({ marginLeft: −10}, speed)
     .animate({ marginLeft: 10 }, speed)
     .animate({ marginLeft: 0}, speed, function () {
     $('#debug').append('

Animation beendet.

');
     }); // Ende der langen Kette
});
});
    Diskussion
    In diesem (künstlichen) Beispiel nutzen wir mehrere Aufrufe der Methode
animate
, umdie Box zu schütteln (bei einem »echten« Einsatz wäre es wahrscheinlich besser, eine »schüttelnde« Easing-Funktion zu nutzen!).
    Diese Animation wird ausgelöst, wenn der Anwender auf den Animations-Button klickt.
    Ich habe zwei Callback-Funktionen genutzt, die ausgeführt werden, wenn die Animation gestartet wird und wenn sie endet. Beachten Sie, dass der Code zwar mehrere Zeilen umfasst, aber durch die Verkettung handelt es sich von
$('.box')
bis
}); // Ende der langen Kette
um eine JavaScript-Anweisung.
    Die folgende jQuery-Zeile filtert alle
div.box
-Elemente aus der Collection heraus, die aktuell animiert werden, so dass die folgenden Animationen nur für die restlichen Elemente genutzt werden:
.filter(':not(:animated)')
    Da wir in unserem Beispiel nur ein einzelnes
div.box
-Element haben, wird die Animation nur dann ausgeführt, wenn sie nicht schon läuft.

Animationen stoppen und zurücksetzen
    Problem
    Läuft eine Animation, kann es sein, dass wir sie auch einmal abbrechen müssen. Das passiert gerne bei der Verwendung eines Mouseoverund Mouseout, um eine Animation zum Anzeigen und Verbergen von Inhalten zu erhalten.
    Wird der Mauscursor in den Trigger-Bereich hinein- und herausbewegt, dann wird die Animation immer wieder getriggert. So kann ein Block hoch- und runtergeschoben werden, bis die ausgelösten Animationen abgearbeitet sind.
    Eine Lösung wäre die Verwendung des Selektors
:animated
, umdie Elemente auszufiltern. Aber vielleicht wollen Sie auch ein Element wieder per Fading ausblenden, wenn der Anwender den Mauscursor aus dem Trigger-Bereich entfernt, anstatt die Animation »auslaufen« zu lassen. Dies lässt sich mit der Methode
stop()
erreichen.
    Lösung
    Wir haben dem Element
div.box
einen CSS-Style verpasst, um die Opazität auf Null zu setzen.
    Statt den Anwender auf den Button klicken zu lassen, um den Effekt auszulösen, lassen wir die Animation laufen, wenn sich der Mauscursor nur auf den Button bewegt . Damit wollen wir nur zeigen, dass die Animation ohne die Aufrufe von
stop()
außer Kontrolle geraten würde:
$(document).ready(function () {
$('#animate').hover(function () {
    $('.box').stop().fadeTo(200, 1);
}, function () {
    $('.box').stop().fadeTo(200, 0);
});
});
    Diskussion
    Dieses Problem wird typischerweise über eine Kombination aus
fadeIn()
und
fadeOut()
gelöst. Nutzt man diese allerdings ohne
stop()
, wird der Effekt jedes Mal wiederholt, wenn sich der Mauscursor über den Button bewegt.
    Um das zu verhindern, fügen wir die
stop()
-Anweisung ein, bevor wir die nächste Animation in die Queue stellen. Der große Vorteil ist der, dass die Animation so auch mittendrin gestoppt wird. Befindet sich die Opazität zum Beispiel gerade bei 0,5 (oder 50 im IE), wird die nächste