Heim >Web-Frontend >Front-End-Fragen und Antworten >Was nützt die jquery stop()-Methode?
Was nützt die jquery stop()-Methode?
- 青灯夜游Original
- 2022-03-01 18:32:382920Durchsuche
In jquery wird die stop()-Methode verwendet, um den aktuell ausgeführten Animationseffekt für das ausgewählte Element zu stoppen. Die Syntax lautet „$(selector).stop(stopAll,goToEnd)“; die Parameter stopAll und goToEnd sind optionale Parameter. Die Werte sind alle boolesch und die Standardwerte sind alle falsch.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
In jquery wird die Methode stop() verwendet, um den aktuell ausgeführten Animationseffekt für das ausgewählte Element zu stoppen.
Syntax:
$(selector).stop(stopAll,goToEnd)
stopAll und goToEnd sind optionale Parameter, ihre Werte sind boolesche Werte und die Standardwerte sind falsch. stopAll bedeutet, die Warteschlangenanimation zu stoppen. Wenn der Wert „false“ ist, wird nur die aktuelle Animation gestoppt; wenn der Wert „true“ ist, werden die aktuelle Animation und alle nachfolgenden Animationen in der Warteschlange gestoppt. goToEnd bedeutet, dass die Animation in den Endzustand des aktuellen Animationseffekts springt.
Davon hat die stop()-Methode 4 Formen, wie in Tabelle 1 gezeigt.
| Form | Beschreibung |
|---|---|
| stop() | entspricht stop(false, false), wodurch nur die aktuelle Animation und nachfolgende Animationen gestoppt werden wird auch Sie können weiterhin ausführen |
| stop(true) | entspricht stop(true, false), stoppt die aktuelle Animation und stoppt die nachfolgende Animation |
| stop(true, true) | Das Die aktuelle Animation wird nur weiterhin ausgeführt Stoppen Sie die folgende Animation |
| stop(false, true) | Stoppen Sie die aktuelle Animation, springen Sie zur letzten Animation und führen Sie die letzte Animation aus |
Im Allgemeinen verwenden wir nur stoppt in der tatsächlichen Entwicklung () Der erste Parameter der Methode, der zweite Parameter wird selten verwendet.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.color.js"></script>
<script>
$(function () {
$("#btn-start").click(function () {
$("div").animate({ "width": "200px" }, 2000)
.animate({ "background-color": "red" }, 2000)
.animate({ "height": "200px" }, 2000)
.animate({ "background-color": "blue" }, 2000);
});
$("#btn-stop").click(function () {
$("div").stop();
})
})
</script>
</head>
<body>
<input id="btn-start" type="button" value="开始" />
<input id="btn-stop" type="button" value="停止" /><br />
<div></div>
</body>
</html>Der Vorschaueffekt ist im Bild unten dargestellt.
In diesem Beispiel definieren wir 4 Animationen mit der Methode animate(). Nachdem wir auf die Schaltfläche [Start] geklickt haben und nach einer Weile erneut auf die Schaltfläche [Stopp] klicken, wird die aktuell ausgeführte Animation sofort gestoppt (d. h. die aktuelle animate()-Methode gestoppt) und dann zur nächsten Animation gesprungen (das heißt, die nächste animate()-Methode).
Wenn Sie erneut auf die Schaltfläche [Stopp] klicken, wird zur nächsten Animation gesprungen und so weiter. Freunde können es selbst testen, um es zu fühlen.
Wenn Sie alle Warteschlangenanimationen stoppen möchten, können Sie dies tun, indem Sie den ersten Parameter der stop()-Methode als true definieren. Der Code lautet wie folgt:
$("#btn-stop").click(function () {
$("div").stop(true);
})Der Vorschaueffekt wird im angezeigt Abbildung unten.
In diesem Beispiel verwenden wir die Methode hover(), um den Animationseffekt zu definieren, wenn sich der Mauszeiger hinein und heraus bewegt. Wenn wir Elemente schnell hinein- oder herausbewegen, werden wir einen sehr seltsamen Fehler entdecken: Das Element wird immer länger oder kürzer! Mit anderen Worten: Die Animation wird weiterhin ausgeführt und kann überhaupt nicht gestoppt werden.
Diese Art von „Kann nicht aufhalten“-Fehler tritt häufig in der tatsächlichen Entwicklung auf, daher müssen Freunde ihm besondere Aufmerksamkeit schenken. Tatsächlich wird dieser Fehler durch die Anhäufung von Animationen verursacht. Wenn in jQuery eine Animation nicht abgeschlossen ist, wird sie zur „Animationswarteschlange“ hinzugefügt. In diesem Beispiel wird jedes Mal, wenn ein Element hinein- oder herausbewegt wird, eine Animation generiert. Wenn die Animation noch nicht abgeschlossen ist, wird sie zur Animationswarteschlange hinzugefügt, und die noch nicht abgeschlossene Animation wird fortgesetzt ausgeführt, bis alle Animationen abgeschlossen sind.
Für diesen Fehler müssen wir nur die stop()-Methode hinzufügen, bevor die Animation ausgeführt wird, die durch das Ein- oder Ausschieben von Elementen erzeugt wird, und er kann leicht behoben werden. Der endgültige geänderte Code lautet wie folgt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("div").hover(function () {
$(this).animate({ "height": "150px" }, 500);
}, function () {
$(this).animate({ "height": "50px" }, 500); //移出时返回原状态
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>Für diesen Fehler, der durch die Anhäufung von Animationen verursacht wird, können wir auch is(":animated") verwenden, um den aktuellen Animationsstatus zu ermitteln und ihn zu beheben. Die Methode is(":animated") wird später ausführlich vorgestellt.
Tatsächlich verfügt jQuery auch über eine Methode zum Unterbrechen von Animation-Finish (). Diese Methode funktioniert ähnlich wie die Methode stop(true,true), da sie die Animation in der Warteschlange löscht und bewirkt, dass die aktuelle Animation auf ihren Endwert springt. Im Gegensatz zu stop(true,true) bewirkt es jedoch, dass alle Animationen in der Warteschlange auf ihre Endwerte springen. Die Methode „finish()“ wird nicht oft verwendet, werfen wir einen kurzen Blick darauf.
【Empfohlenes Lernen:
jQuery-Video-Tutorial, Web-Front-End-Entwicklungsvideo】
Das obige ist der detaillierte Inhalt vonWas nützt die jquery stop()-Methode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!