Im Moment füge ich Elemente zu einer Seite eines click -Ereignisses mit %Co_de% . Ich möchte das irgendwie animieren, damit die neuen Elemente nicht plötzlich aus dem Nichts auftauchen.
Ich bin nicht beunruhigt, welche Animationsmethode verwendet wird, solange sie dem Benutzer zeigt, was passiert, wenn sie klicken.
Ich habe noch nie zuvor Animationen in jQuery verwendet und nur Beispiele für die Arbeit mit vorhandenen DOM-Elementen gefunden. Mit welchem Muster soll die Erstellung neuer Elemente in jQuery animiert werden?
Was ich in der Vergangenheit getan habe, ist das Einfügen von Platzhaltern und divs in der Größe null an dem Punkt, an dem ich mein neues Element einfügen möchte.
Ich animiere dann den Platzhalter auf die gewünschte Größe und füge dann eine versteckte Version des Elements ein, das ich im Platzhalter anzeigen möchte, und blende es in die Ansicht ein.
Sobald die Einblendung abgeschlossen ist, entpacke ich den Platzhalter, um ihn zu entfernen, indem ich den folgenden Code benutze:
%Vor%Alle jQuery-Animationsfunktionen verfügen über 'onComplete'-Handler, mit denen Sie verschiedene Teile der Animation starten können, sobald sie abgeschlossen sind. Es ist also keine allzu große Aufgabe, all dies zu erreichen.
Außerdem ist es sehr hilfreich, ein JavaScript-Modell aller Elemente beizubehalten, anstatt sich auf das langsame DOM-Traversal und die jQuery-Methode .data () zu verlassen.
Versuchen Sie etwas wie folgt:
%Vor%wobei 1000 die Geschwindigkeit ist, mit der das Element eingeblendet werden kann. Ich lege das hide () dort hin, vorausgesetzt, das neue DOM-Element ist beim Erstellen sichtbar, nicht sicher, ob es benötigt wird oder nicht. Am besten legen Sie ein "display: none" auf das neue Element, wenn Sie es erstellen, und verwenden Sie dann einfach fadeIn ().
Es gibt noch andere Effekte, die Sie verwenden können, wie slideUp / slideDown, also sollten Sie sich auch diese ansehen.
Sie können für jede Animation gehen.
Sie können für eine einfache show
Oder wie zuvor vorgeschlagen, fadeIn . Wieder kannst du die Geschwindigkeit bestimmen - wie in show .
Oder Sie könnten für eine benutzerdefinierte Animation gehen.
Gehen Sie hier für die Dokumentation der jQuery-Effekte.