JQuery animieren mehrere Elemente
-
19-09-2019 - |
Frage
Ich versuche Folgendes zu tun:
Ich habe zwei Sätze von DOM -Elementen auf einer Seite. Alle Elemente im ersten Satz tragen die Klasse display-element
, und der zweite Elementsatz tragen die Klasse edit-element
.
Jetzt habe ich eine Taste (id =edit-button
). Wenn ich auf diese Schaltfläche klicke, möchte ich alle display-elements
ausblenden und all das edit-elements
erscheinen.
Ich tat natürlich:
$('#edit-button').click(function(){
$('.display-element').fadeOut(300, function() {
$('.edit-element').fadeIn(300);
});
});
Ich fand meine Überraschung, dass dies nicht wie erwartet funktionierte. Dies ist passiert: Sobald das erste Element mit der Klasse display-element
verblasste alles edit-elements
begann zu verblassen.
Jetzt gibt es einen einfachen Weg (vielleicht etwas in der Dokumentation, die ich verpasst habe), die ich mit allen haben kann edit-elements
Fangen Sie an Nur schließlich display-elements
verblasst?
Vielen Dank
JRH
Lösung
Warum sollte das wirklich passieren? Ich meine, es scheint, dass Sie die Animationen gleichzeitig starten (es gibt nur einen Anruf zu .fadeOut
Immerhin, richtig?). Ich denke, das liegt daran, dass $ () ein Array liefert und wenn Sie anrufen .fadeOut
, JQuery iteriert durch das Array und führt alles aus, was es für jedes seiner Elemente ausführt. Von Anfang an. Da der Rückruf an jede Animation "angehängt" wird, sehen Sie den sichtbaren Effekt des ersten Rückrufs.
Ich denke, Sie konnten dies durch die Iterie durch das Array der zurückgegebenen Elemente selbst und sicherstellen, dass Sie den Rückruf nur an den letzten hinzufügen.
$('#edit-button').click(function(){
var display_elements = $('.display-element');
var len = display_elements.length;
for (var i = 0; i < len-1; i++) {
$(display_elements[i]).fadeOut(300); // no callback
}
$(display_elements[len-1]).fadeOut(300, function() {
$('.edit-element').fadeIn(300);
}); // last element - attach callback
});
Es tut mir leid, wenn der Code ausgeschaltet ist, muss ich zugeben, dass mein JavaScript-Fu nicht sehr stark ist :)
Andere Tipps
Nachdem ich keine „raffinierte API -Methode“ gefunden hatte, habe ich mich dazu entschlossen:
$('#edit-button').click(function() {
var displays = $('.display-element');
var counter = 0;
var max = displays.length;
displays.fadeOut(300, function() {
counter++;
if( counter>=max ) $('.input-element').fadeIn(300);
}
});
Dies ist im Wesentlichen @Shylents Antwort mit mehr 'JavaScript-fu' :)
Die Lösung besteht darin, einen SetTimeout für das Verblassen in der Funktion zu verwenden
$('#edit-button').click(function(){
$('.display-element').fadeOut(300);
setTimeout("$('.edit-element').fadeIn(300);", 300);
});
Diese JavaScript -Funktion verzögert den Auslöser des Fading in Funktion für 300 Miliskunden
Ich habe gerade ein ähnliches Problem geleitet und festgestellt, dass die "Schritt" -Callback -Option das gewünschte Verhalten ergab.
Schritt: Eine Funktion, die nach jedem Schritt der Animation aufgerufen wird.
^ http://api.jquery.com/animate/
Scrollen Sie zur Demo, um die Stufenverwendung zu verwenden, und Sie werden sehen, wie Sie animieren können, um ein einzelnes Objekt aufzunehmen, und verwenden Sie Schritt, um den Rest Ihres Sets in jedem Schritt der Animation zu aktualisieren. Auf diese Weise haben Sie nur einen Rückruf abgefeuert, wenn die Animation abgeschlossen ist.