JQuery stoppt CSS-Animation

Bei der Webseitenproduktion sind Animationseffekte ein sehr häufiges Element und CSS-Animation ist eine der beliebtesten Methoden. In einigen Fällen ist es jedoch erforderlich, die laufende CSS-Animation zu stoppen. In diesem Fall muss JQuery verwendet werden, um dies zu erreichen. In diesem Artikel wird erläutert, wie Sie mit jquery CSS-Animationen stoppen.

1. Was ist CSS-Animation?

Animationseffekte werden in CSS3 mithilfe von @keyframes-Regeln definiert. Durch das Hinzufügen von Attributen wie Keyframes und Animationszeit zu Elementen können verschiedene Animationseffekte erzielt werden.

Zum Beispiel können wir den folgenden CSS-Code definieren, um eine Bewegungsanimation von links nach rechts zu implementieren:

@keyframes move-right {
  0% { left: 0; }
  100% { left: 100px; }
}

#box {
  position: absolute;
  left: 0;
  animation: move-right 2s ease-out forwards;
}

Im obigen Code definieren wir eine Animation mit dem Namen „move-right“, die von 0 % auf 100 % geht Die Keyframes legen jeweils die linke Positionseigenschaft des Elements fest. Dann wenden wir diese Animation auf das Element mit der ID „box“ an, setzen die Animationszeit auf 2 Sekunden, den Beschleunigungseffekt auf „ease-out“ und behalten schließlich den Endzustand der Animation auf dem Element bei.

2. CSS-Animation stoppen

Normalerweise wird die CSS-Animation gemäß der von uns definierten Animationszeit und den Regeln bis zum Ende wiederholt. Aber manchmal müssen wir die Animation stoppen, während sie läuft. In diesem Fall müssen wir jquery verwenden, um dies zu erreichen.

Zuerst müssen wir dem Element eine Schaltfläche oder einen anderen Auslöser hinzufügen, der die Animation stoppen kann, und einen Ereignis-Listener für den Auslöser hinzufügen. Im folgenden Code erstellen wir beispielsweise ein div-Element, das eine Schaltfläche enthält, und fügen einen „Click“-Ereignis-Listener für die Schaltfläche hinzu:

<div id="box" class="animated">
  <button id="stop-btn">停止动画</button>
</div>

Als Nächstes müssen wir einen jquery-Ereignis-Listener definieren, der ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt Animation stoppen. Übergeben Sie die ID des animierten Elements an den Ereignis-Listener und verwenden Sie dann die „stop()“-Methode von jquery, um die Animation zu stoppen. Im folgenden Code erstellen wir beispielsweise eine Schaltfläche mit dem Namen „stop-btn“ und fügen ihr einen Klickereignis-Listener hinzu:

$(document).ready(function() {
  $('#stop-btn').click(function() {
    $('#box').stop();
  });
});

Im obigen Code verwenden wir die „ready()“-Methode von jquery, um sicherzustellen, dass die Seite dies hat geladen, und fügen Sie dann einen Click-Ereignis-Listener zum Schaltflächenelement hinzu. Wenn der Benutzer auf die Schaltfläche klickt, stoppt jquery die laufende Animation für das Element mit dem Namen „box“. Es ist zu beachten, dass wir, wenn wir die Animation wiedergeben möchten, die Methode „animate()“ von jquery verwenden müssen, um die Animation neu zu starten.

3. Was Sie bei der Verwendung von jquery zum Stoppen der CSS-Animation beachten sollten:

1 Wir können die Wiedergabe der CSS-Animation jederzeit mit jquery stoppen Zeit, sei es während der Animationswiedergabe oder nach dem Ende der Animation.

2. Wir können die Methode „stop()“ verwenden, um alle Animationen auf dem angegebenen Element zu stoppen, oder die Methode „stop(true)“ verwenden, um die aktuell abgespielte Animation zu stoppen und sofort in den Endzustand zu wechseln, oder „ stop(false))“-Methode stoppt die aktuell abgespielte Animation und belässt sie in ihrem aktuellen Zustand.

3. Wenn wir die CSS-Animation stoppen, werden alle definierten CSS-Animationseigenschaften und Keyframes sofort entfernt. Das heißt, wenn wir die Animation wiedergeben möchten, müssen wir die CSS-Eigenschaften und Keyframes erneut hinzufügen.

IV. Zusammenfassung

Die Verwendung von jquery zum Stoppen der CSS-Animation ist eine sehr praktische Möglichkeit, die abgespielte Animation einfach zu stoppen und bei Bedarf neu zu starten. Bei der tatsächlichen Verwendung müssen Sie jedoch auf verschiedene Details achten. Beispielsweise müssen Sie beim Definieren von Animationen die Details der Wiedergabe und des Stopps klären und auch die verschiedenen Status und Attribute der Animationswiedergabe kennen. In diesem Artikel wird hauptsächlich beschrieben, wie man mit jquery die Wiedergabe von CSS-Animationen stoppt. Ich hoffe, dass er für alle hilfreich ist.

Das obige ist der detaillierte Inhalt vonJQuery stoppt CSS-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!