JQuery Kochbuch (German Edition)

vermeiden, müssen Sie einfach alle bestehenden Animationen für das Element abbrechen, bevor Sie eine neue erstellen.
    Dazu haben Sie die jQuery-Methode
stop()
zur Verfügung. Sie stoppt (wie der Name schon sagt) die aktuelle Animation und entfernt optional auch die folgenden.
    Diskussion
    Beispiel
    Ich werde Ihnen ein Beispiel einer Animation der CSS-Eigenschaft
opacity
zeigen, aber die Lösung funktioniert auch für jede andere Eigenschaft:
jQuery('#something').hover(
    function(){
     jQuery(this) .stop() .animate({opacity:1}, 1000);
    },
    function(){
     jQuery(this) .stop() .animate({opacity:0.8}, 1000);
    }
);
    Dies funktioniert auch für vorgefertigte jQuery-Animationen wie
slideUp()
,
slideDown()
,
fadeIn()
und so weiter.
    Dies ist das vorherige Beispiel, aber mit einem Fade-Effekt:
jQuery('#something').hover(
    function(){
     jQuery(this).stop() .fadeTo( 1, 1000 ) ;
    },
    function(){
     jQuery(this).stop() .fadeTo( 0.8, 1000 ) ;
    }
);
    Der Rest
    Es kann aber immer noch ein Problem entstehen, wenn man sich in Situationen wie der folgenden befindet:
jQuery('#something').hover(
    function(){
     jQuery(this).stop()
     .fadeTo( 1, 1000 ) .animate( {height:500}, 1000 ); },
    function(){
     jQuery(this).stop()
     .fadeTo( 0.8, 1000 ) .animate( {height:200}, 1000 ); }
);
    Probieren Sie diesen Code aus und bewegen die Maus sehr schnell, dann wird das Element wieder sehr unschön animiert werden – allerdings nur die Höhe, nicht die Opazität.
    Der Grund ist einfach – Animationen werden in jQuery standardmäßig in eine Queue gestellt. Fügen Sie also mehrere Animationen hinzu, werden sie nacheinander ausgeführt.
    stop()
stoppt (und entfernt) standardmäßig nur die aktuelle Animation. In unserem letzten Beispiel wird nur die Animation der Opazität entfernt werden, die Animation der Höhe verbleibt aber in der Queue und ist bereit, sofort ausgeführt zu werden.
    Um das zu vermeiden, müssen Sie entweder
stop()
ein weiteres Mal aufrufen oder als Argument für die Methode
true
übergeben. Dadurch sorgt
stop()
dafür, dass auch alle gequeueten Animationen verworfen werden. Unser Hover-Code sollte also so aussehen:
jQuery('#something').hover(
    function(){
     jQuery(this).stop( true )
     .fadeTo( 1, 1000 )
     .animate( {height:500}, 1000 );
    },
    function(){
     jQuery(this).stop( true )
     .fadeTo( 0.8, 1000 )
     .animate( {height:200}, 1000 );
    }
);

Eventhandler für neu hinzugefügte Elemente nutzbar machen
    Problem
    Sie haben einen oder mehrere Eventhandler gebunden, die plötzlich nicht mehr aufgerufen werden.
    Das passiert, nachdem man dynamisch neue Elemente hinzugefügt hat – sei es über eine Ajax-Anforderung oder einfach durch jQuery-Anweisungen wie (
append()
,
wrap()
und so weiter.
    ----
    Note
    Dieses Problem tritt immer wieder auf und jedem von uns ist es schon einmal begegnet.
    Ich werden die theoretischen Grundlagen dazu im Diskussions-Abschnitt behandeln. Haben Sie das Gefühl, dass Sie dies verstehen sollten, bevor Sie sich der Lösung zuwenden, dann werfen Sie einfach einen Blick in Warum gehen Eventhandler verloren? .
    ----
    Lösung
    Es gibt zwei mögliche Lösungen für dieses Problem, wobei beide ihre Vor- und Nachteile haben:
    Rebinding
Bei diesem Ansatz rufen Sie immer dann, wenn neue Elemente hinzugefügt wurden, wieder
bind()
auf.
    Dies lässt sich leicht implementieren und erfordert keine Plugins oder neue Methoden.
    Am einfachsten ist es, alle Bindings in einer Funktion herzustellen, die man nach jeder Änderung aufruft.
    Event-Delegation
Dabeiwird das Event Bubbling genutzt. [ 15 ] Dieser Ansatz ist schnell und einfach, erfordert aber ein gewisses Mitdenken und kann manchmal (ein bisschen) trickreich sein.
    Seit jQuery 1.3 gibt es eine direkte Unterstützung der Event-Delegation. Man verwendet einfach die neue
live()
-Methodestatt
bind()
.
    Diskussion
    Warum gehen Eventhandler verloren?
    JavaScript ist im Gegensatz zu CSS keine deklarative Sprache. Sie beschreiben keine Verhaltensweisen, die dann wie von Zauberhand angewandt werden.
    JavaScript ist wie die meisten anderen Programmiersprachen imperativ. Der Entwickler gibt eine Folge von Aktionen an, die ausgeführt werden sollen, und diese werden dann umgesetzt, wenn die Codezeile erreicht wird.
    Schauen Sie sich diesen Code an:
function handler(){
    alert('got clicked');
}
jQuery('.clickable').bind('click', handler);
    Dabei passiert Folgendes:
    Es werden alle Elemente mit einer CSS-Klasse
clickable
gesucht und in der Collection