Was nützt die jquery stop()-Methode?-Front-End-Fragen und Antworten-php.cn

Was nützt die jquery stop()-Methode?

青灯夜游

Freigeben： 2022-03-01 18:33:13

Original

2900 Leute haben es durchsucht

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.

Was nützt die jquery stop()-Methode?

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)

Nach dem Login kopieren

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.

Tabelle 1: 4 Formen der stop()-Methode
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>

Nach dem Login kopieren

Der Vorschaueffekt ist im Bild unten dargestellt.

Was nützt die jquery stop()-Methode?

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);
})

Nach dem Login kopieren

Der Vorschaueffekt wird im angezeigt Abbildung unten.

Was nützt die jquery stop()-Methode? 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>

Nach dem Login kopieren

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!