JQuery stoppt die Animation

jQuery ist eine in der Webentwicklung weit verbreitete JavaScript-Bibliothek. Ihre flexible Animationsfunktion kann das Benutzererlebnis der Website effektiv verbessern. In der tatsächlichen Entwicklung sind viele Entwickler auf Situationen gestoßen, in denen sie die Ausführung der Animation stoppen müssen. In diesem Artikel erfahren Sie, wie Sie den Animationseffekt von jQuery stoppen.

1. Verwenden Sie die stop()-Methode

jQuery bietet eine stop()-Methode, mit der der laufende Animationseffekt gestoppt werden kann. Die Syntax dieser Methode lautet wie folgt:

$(selector).stop(stopAll, gotoEnd);

Dabei ist selector das zu animierende Element; stopAll ist ein optionaler Parameter, der angibt, ob alle laufenden Animationseffekte gestoppt werden sollen (der Standardwert ist false, was bedeutet, dass nur die animierten Elemente gestoppt werden). aktuelle Animation) ; gotoEnd ist ein weiterer optionaler Parameter, der verwendet wird, um anzugeben, wo der Animationseffekt gestoppt werden soll (der Standardwert ist false, was bedeutet, dass er an der aktuellen Position stoppt).

Hier ist ein einfaches Beispiel, das zeigt, wie man eine laufende Animation stoppt:

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop();
    });
});

Wenn der Benutzer in diesem Beispiel auf die Schaltfläche klickt, wird ein Element mit der ID „Box“ für 5 Sekunden nach links verschoben. Wenn der Benutzer auf das Element mit der ID „stop“ klickt, wird die Animation gestoppt.

2. Verwenden Sie die Methode „clearQueue()“

Zusätzlich zur Methode „stop()“ bietet jQuery auch eine Methode „clearQueue()“ zum Löschen der Warteschlange für das Element. Wenn ein Animationseffekt gestoppt wird, werden normalerweise alle Animationen in der Warteschlange gelöscht. Wenn Sie jedoch die aktuelle Animation nicht stoppen, aber andere Animationseffekte löschen möchten, ist die Methode clearQueue() sehr nützlich.

Die Syntax dieser Methode lautet wie folgt:

$(selector).clearQueue(queueName);

Dabei ist queueName ein optionaler Parameter, der zur Angabe des Namens der zu löschenden Warteschlange verwendet wird. Wenn dieser Parameter nicht angegeben ist, werden alle Animationseffekte in der Standardwarteschlange gelöscht.

Hier ist ein Beispiel, das zeigt, wie andere Animationseffekte außer der aktuellen Animation gelöscht werden, wenn die Animation gestoppt wird:

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
        $("#box").animate({top: '100px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop(false, true).clearQueue();
    });
});

Wenn der Benutzer in diesem Beispiel auf die Schaltfläche klickt, wird ein Element mit der ID „Box“ zu einem Animationseffekt das bewegt sich zuerst nach links und dann nach unten. Wenn der Benutzer auf das Element mit der ID „Stop“ klickt, wird die Abwärtsbewegungsanimation gestoppt, der Animationseffekt der Linksbewegung bleibt jedoch erhalten. Gleichzeitig werden auch andere Animationseffekte gelöscht.

Zusammenfassung:

Wenn Sie den laufenden Animationseffekt stoppen möchten, können Sie die Methode stop() verwenden. Wenn Sie beim Stoppen der Animation andere Animationseffekte in der Warteschlange löschen möchten, können Sie die Methode clearQueue() verwenden. Wählen Sie in der tatsächlichen Entwicklung je nach Bedarf unterschiedliche Methoden aus, um Ihre Ziele zu erreichen.

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