jquery stop和finish停止运动

时间：6年前阅读：4221

stop()接受三个参数（要停止的动画名称，是否清空队列中的动画，是否当前动画立即完成）

finish()是另一种停止动画的方式，可以停止当前正在运行的动画，清除所有排队的动画，并完成匹配元素所有的动画。

stop()会清除队列，保持现状。finish()会导致所有队列的动画的css属性值跳转到他们的最终值。

1、stop和finifh

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#pao{    
				position: absolute;    
				width: 400px;    
				height: 400px;    
				top: 100px;    
				left: 0;    
			}    
		</style>    
		<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#dd').click(function(){    
				$('#pao').animate({'left':'600px'},5000);    
				})    
				$('#stop').click(function(){    
//					stop()是停止元素身上正在执行的动画,(说停马上停)    
					$('#pao').stop();    
				})    
				$('#finish').click(function(){    
//					finish会停止动画，并且将元素的状态变为运动的最终指定的状态（简单理解：跑完到原来指定的终点再停）    
					$('#pao').finish();    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<input type="button" name="dd" id="dd" value="来点我呀" />    
		<input type="button" name="stop" id="stop" value="stop停止" />    
		<input type="button" name="finish" id="finish" value="finish停止" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903251553516399115625.gif" id="pao"/>    
	</body>    
</html>

2、stop和finifh 一些其它情况

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#pao{    
				position: absolute;    
				width: 400px;    
				height: 400px;    
				top: 100px;    
				left: 0;    
			}    
		</style>    
		<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
//			如果元素身上现在有多个运动,stop会停止元素身上现在正在执行的运动,然后开始运行队列中下一个运动    
//			如果元素身上现在有多个运动,finish会停止元素身上所有运动,并且将元素的状态立即调整为最后一个运动指定的目标状态    
//			(比如:有4个运动12秒最终到达800px这个位置 ，如果点finish，它就把这4个运动清理掉了 ,不用走走停停，不用运动了直接送到终点800px得了)    
			$(function(){    
				$('#tt1').click(function(){    
				$('#pao').animate({'left':'200px'},3000);    
				})    
				$('#tt2').click(function(){    
				$('#pao').animate({'left':'400px'},3000);    
				})    
				$('#tt3').click(function(){    
				$('#pao').animate({'left':'600px'},3000);    
				})    
				$('#tt4').click(function(){    
				$('#pao').animate({'left':'800px'},3000);    
				})    
				$('#dd').click(function(){    
				$('#pao').animate({'left':'600px'},3000);    
				})    
				$('#stop').click(function(){    
//					stop()是停止元素身上正在执行的动画,(说停马上停)    
					$('#pao').stop();    
				})    
				$('#finish').click(function(){    
//					finish会停止动画，并且将元素的状态变为运动的最终指定的状态（简单理解：跑完到原来指定的终点再停）    
					$('#pao').finish();    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<input type="button" name="dd" id="tt1" value="200" />    
		<input type="button" name="dd" id="tt2" value="400" />    
		<input type="button" name="dd" id="tt3" value="600" />    
		<input type="button" name="dd" id="tt4" value="800" />    
		<input type="button" name="dd" id="dd" value="来点我呀" />    
		<input type="button" name="stop" id="stop" value="stop停止" />    
		<input type="button" name="finifh" id="finish" value="finish停止" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903251553516399115625.gif" id="pao"/>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery stop和finish停止运动

网友评论