suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendung der Stop-Methode der JQuery-Animationsanimation

Detaillierte Erläuterung der Verwendung der Stop-Methode der JQuery-Animationsanimation

巴扎黑
巴扎黑Original
2017-06-30 11:38:291455Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung der Stop-Methode von JQueryanimationanimate vorgestellt. Freunde in Not können sich auf die

animate-Syntax beziehen:

Der Code lautet wie folgt:

$(selector).animate(styles,speed,easing,callback)

Der Code lautet wie folgt:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Testing</title> 
<link rel="stylesheet" href="css/reset.css"> 
<script src="js/jquery.js"></script> 
<style> 
.wrap { 
position
: relative; 
height
: 300px; 
width: 300px; 
border:5px solid #FCF; 
} 
.wrap p { 
position: absolute; 
left: 0;top: 0; 
height: 50px; 
width: 50px; 
background
: #FA0; 
} 
</style> 
</head> 
<body> 
<input type="button" id="btn1" value="停止当前动画"> 
<input type="button" id="btn2" value="停止所有动画"> 
<input type="button" id="btn3" value="停止所有动画，到达终点"> 
<p class="wrap"> 
<p></p> 
</p> 
<script> 
function moveX(){ 
$(&#39;.wrap p&#39;).animate({&#39;left&#39;:&#39;250px&#39;},1000).animate({&#39;left&#39;:&#39;0px&#39;},1000); 
} moveX(); 
$(&#39;#btn1&#39;).click(function(){ 
$(&#39;.wrap p&#39;).stop(); // 停止当前动画,沿路返回起点，若是返回过程中再点击，会暂停在路中 
clearInterval(); 
}) 
$(&#39;#btn2&#39;).click(function(){ 
$(&#39;.wrap p&#39;).stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点，若是返回过程中再点击，会暂停在路中 
}) 
$(&#39;#btn3&#39;).click(function(){ 
$(&#39;.wrap p&#39;).stop(true,true); // 停止所有动画 ，去的路程中点击停止会直接到达终点，若是返回过程中再点击，会停止到在起点 
}) 
// .stop() // 停止当前动画 
// .stop(true) // 停止所有动画 
// .stop(true,true) // 停止所有动画，到达动画终点 
</script> 
</body> 
</html>


.stop (); // Stoppen Sie die aktuelle Animation und kehren Sie unterwegs zum Ausgangspunkt zurück. Wenn Sie während des Rückkehrvorgangs erneut klicken, wird sie unterwegs angehalten

.stop (true); // Stoppen Sie alle Animationen und klicken Sie direkt auf dem Weg auf Stopp. Wenn Sie während des Rückkehrvorgangs erneut klicken, wird er auf dem Weg angehalten

.stop(true,true) ; // Stoppen Sie alle Animationen, um direkt zum Endpunkt zu gelangen. Klicken Sie erneut, um am Startpunkt anzuhalten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Stop-Methode der JQuery-Animationsanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery-Bindungsereignisse, Entfernungsereignisse und AnimationenNächster Artikel：JQuery-Bindungsereignisse, Entfernungsereignisse und Animationen

In Verbindung stehende Artikel

Mehr sehen