Jquery中stop()的用法

最新推荐文章于 2023-08-25 11:34:20 发布

周帅帅Love

最新推荐文章于 2023-08-25 11:34:20 发布

阅读量3.9k

点赞数 6

分类专栏： jquery 文章标签： stop()用法

本文链接：https://blog.csdn.net/qq_36982349/article/details/82968180

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

stop()
stop()：表示让运动的元素立即停止动画。
接收两个参数，都是布尔值，默认值都是false
第一个参数：是否清空当前动画队列。
第二个参数：是否立即完成当前动画。
①stop(false，false)等价方式stop()表示立即进入下一个动画，立即停止当前动画。
②stop(false，true)表示立即进入下一个动画，立即停止并完成当前动画。
③stop(true，true)表示清空当前动画队列，立即停止并完成当前动画。
④stop(true，false)等价方式stop(true)表示清空当前动画队列，立即停止当前动画。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			position: absolute;
			width: 100px;
			height: 100px;
			left: 50px;
			top: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<button id="btn1">stop(false, false)</button>
	<button id="btn2">stop(false, true)</button>
	<button id="btn3">stop(true, true)</button>
	<button id="btn4">stop(true, false)</button>
	<div id="box"></div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	$("#box").animate({"left": 500}, 2000);
	$("#box").animate({"top": 500}, 2000);
	$("#box").animate({"left": 50}, 2000);
	$("#box").animate({"top": 50}, 2000);

	// stop(false, false)
	$("#btn1").click(function() {
		$("#box").stop();
	})
	
	// stop(false, true)
	$("#btn2").click(function() {
		$("#box").stop(false, true);
	})

	// stop(true, true)
	$("#btn3").click(function() {
		$("#box").stop(true, true);
	})

	// stop(true, false)
	$("#btn4").click(function() {
		$("#box").stop(true);
	})
	</script>
</body>
</html>

周帅帅Love

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Jquery中stop()的用法

stop()stop()：表示让运动的元素立即停止动画。接收两个参数，都是布尔值，默认值都是false第一个参数：是否清空当前动画队列。第二个参数：是否立即完成当前动画。①stop(false，false)等价方式stop()表示立即进入下一个动画，立即停止当前动画。②stop(false，true)表示立即进入下一个动画，立即停止并完成当前动画。③stop(true，true)表示...
复制链接

扫一扫

专栏目录