Ich habe Mühe zu verstehen, warum ich das Verhalten bekomme, das ich sehe. Ich habe einen Code, der darauf abzielt, einen Container auszublenden, den Inhalt zu ersetzen und ihn dann wieder einzufügen, wenn es fertig ist.
Ich benutze jQuery, also sieht der Code so aus:
%Vor%Wenn der Link, der diesen Übergang aktiviert, das erste Mal angeklickt wird, wird der Inhalt sofort ersetzt, dann findet das Ausblenden statt und es wird wieder eingeblendet.
Jedes Mal, wenn die Verknüpfung angeklickt wird, sehe ich das richtige Verhalten: Ausblenden und dann mit dem neuen Inhalt einblenden.
Irgendeine Idee, warum das passiert?
Ich habe eine vollständige HTML-Datei angehängt, die das Verhalten zeigt:
Ich bin ziemlich neu in jQuery und versuche, Dinge "richtig" zu machen. Alle Kommentare bezüglich Stil werden geschätzt.
%Vor%Das Problem ist, dass es in jQuery zwei verschiedene Arten von Funktionen gibt - diejenigen, die sofort wirksam werden, und solche, die der Effekt-Warteschlange Effekte hinzufügen.
Sehen wir uns Ihren Code an:
%Vor%fadeOut fügt der Warteschlange eine Fade-Operation hinzu delay fügt der Warteschlange eine Verzögerung hinzu empty leert sofort das Element append hängt den Inhalt sofort an fadeIn fügt der Warteschlange eine Fade-Operation hinzu Die Funktionen, die Elemente zur Warteschlange hinzufügen, kehren sofort zurück - sie warten nicht, bis sie abgeschlossen sind, bevor sie wirksam werden. Dies bedeutet, dass alle Funktionen (fast) zur gleichen Zeit aufgerufen werden - sie warten nicht auf das Ende der Animationsfunktionen.
Sie müssen stattdessen das Callback-Argument für fadeOut verwenden:
Die Funktion wird ausgelöst, wenn die Überblendungsoperation abgeschlossen ist. Daher werden das Leeren und Anhängen verzögert, bis das Element ausgeblendet wird.
Sie müssen eine Callback-Funktion verwenden, um den gewünschten Effekt zu erhalten.
%Vor%Dies stellt sicher, dass der Container erst nach Abschluss der Animation ersetzt wird.
Tags und Links javascript jquery jquery-ui