Ich versuche, mehrere divs zu animieren, die nacheinander nacheinander eingeblendet werden, wenn die Seite geladen wird. Ich möchte es auch umgekehrt machen und nacheinander ausbleichen, wenn ich klicke, um zu einer anderen Seite zu gelangen. Wie kann ich das in jquery einrichten?
Es ist schwer, Ihnen ein Beispiel zu geben, da es in jQuery so viele Möglichkeiten zur Animation gibt, aber hier ist ein einfaches Beispiel. Animieren von zwei <div> s nacheinander (beim Laden der Seite):
Siehe Arbeitsbeispiel hier: Ссылка
HTML:
%Vor%CSS:
%Vor%JavaScript:
%Vor%Hier ist was passiert:
<div> s befinden sich auf der Seite mit CSS opacity: 0
<div> mit der ID animation-one über einen Zeitraum von 700 Millisekunden von Opazität 0 bis Opazität 1 animiert. animation-one s Animation beendet ist, wird bei einer anderen <div> (mit id animation-two ) eine Animation auf ähnliche Weise gestartet. Nun ist das Ausblenden von <div> s ähnlich. Ich habe davon ausgegangen, dass Ihr Link nur auf eine andere Seite verweist. Daher habe ich den folgenden Link deaktiviert, bis die Animation beendet ist:
Dies setzt voraus, dass Sie einen Link <a> mit einer ID von next-page haben, aber es kann wirklich jeder Selektor sein:
HTML:
%Vor%JavaScript:
%Vor%Hier ist was passiert:
next-page geklickt wird, tritt eine ähnliche Animationssequenz wie oben beschrieben auf, aber umgekehrt. Ich denke, das Beispiel im obigen Link zu sehen, sollte helfen. Stellen Sie außerdem sicher, dass die Dokumentation für animiert ist.
Hoffe das hilft!
Bearbeiten: Hinzufügen eines Links zu einem anderen Beispiel, da das OP mehrere <div> s gleichzeitig animieren möchte: Ссылка . Dies verschiebt gemeinsamen Code in Funktionen und macht das Beispiel hoffentlich leichter lesbar.
Beachten Sie, dass die jQuery-Animationsfunktionen einen Rückruf als letzten Parameter verwenden. Diese Funktion wird aufgerufen, wenn die Animation abgeschlossen ist. Sie würden in diesem Rückruf mit der Animation des nächsten DIV beginnen. Eine andere Option wäre fxQueues .
Es gibt keine perfekte Möglichkeit, die Animation beim Verlassen der Seite umzukehren. Sie können es für Links auf Ihrer Seite tun, indem Sie etwas wie folgt ausführen:
%Vor%(Ich garantiere nicht, dass das funktioniert, es ist nur Pseudocode)
Ich würde Callbacks und Warteschlangen verwenden.
Sieh dir das an:
jQuery-Warteschlangenereignisse Ссылка
Hoffe, das ist ein Punkt in die richtige Richtung für Sie.
Tags und Links html jquery jquery-animate