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

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

巴扎黑
Freigeben: 2017-06-30 11:38:29
Original
1483 Leute haben es durchsucht

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>
Nach dem Login kopieren


.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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage