Heim > Artikel > Web-Frontend > So beenden Sie die Animation in jQuery
So beenden Sie die Animation in jQuery
- 清浅Original
- 2019-01-25 11:06:493931Durchsuche
Sie können die Funktion stop() direkt verwenden, um die aktuell laufende Animation sofort zu stoppen. Der Zweck besteht darin, zu verhindern, dass die vorherige Animation den Effekt der nachfolgenden Animation beeinflusst.
In jQuery ist dies möglich durch die stop()-Methode beendet werden. Es wird im Allgemeinen verwendet, um zwischen zwei Animationen zu wechseln. Da ein zu schnelles Gleiten der Maus manchmal dazu führt, dass der Animationseffekt nicht mit der Mausbewegung übereinstimmt, ist stop() erforderlich, um die Animation zu stoppen. Als nächstes werde ich Ihnen im Artikel anhand konkreter Beispiele erklären, wie Sie die Stopp-Methode verwenden
[Empfohlene Kurse: jQuery-Tutorial]
Die stop()-Methode ist auf alle jQuery-Effektfunktionen anwendbar, einschließlich Schieben, Überblenden und benutzerdefinierte Animationen usw.
Es verfügt über zwei Parameter: stopAll, goToEnd
stopAll gibt an, ob die Animationswarteschlange geleert werden soll. Der Standardwert ist „false“, was nur aktive Animationen stoppt und ermöglicht, dass alle in der Warteschlange befindlichen Animationen rückwärts ausgeführt werden.
goToEnd gibt an, ob die aktuelle Animation sofort abgeschlossen werden soll. Der Standardwert ist falsch.
Daher löscht stop() standardmäßig die aktuelle Animation, die für das ausgewählte Element angegeben ist
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#stop{
margin-bottom:10px;
}
#panel,#flip
{ width:200px;
padding:5px;
text-align:center;
background-color:pink;
border:solid 1px #ccc;
}
#panel
{
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击向下滑动</div>
<div id="panel">停止动画</div>
</body>
</html>Rendering:
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dieser Artikel kann jedem helfen, zu lernen, wie man Animationen beendet.
Das obige ist der detaillierte Inhalt vonSo beenden Sie die Animation in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!