Detailed explanation of the use of the stop method of JQuery animation animate-JS Tutorial-php.cn

Detailed explanation of the use of the stop method of JQuery animation animate

巴扎黑

Release： 2017-06-30 11:38:29

Original

1480 people have browsed it

This article mainly introduces the use of the stop method of JQuery animationanimate. Friends who need it can refer to the

animate syntax:

The code is as follows:

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

The code is as follows:

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

Copy after login

.stop() ; // Stop the current animation and return to the starting point along the way. If you click again during the return process, it will pause on the way

.stop(true); // Stop all animations and click Stop during the journey to reach the end point directly. , if you click again during the return process, it will pause on the way

.stop(true,true); // Stop all animations, click stop during the journey and you will directly reach the end point, if you click again during the return process , will stop at the starting point

The above is the detailed content of Detailed explanation of the use of the stop method of JQuery animation animate. For more information, please follow other related articles on the PHP Chinese website!