JQuery animieren mehrere Elemente

Question

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

Answer 1

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 :)

Answer 2

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' :)

Answer 3

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

Answer 4

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.