jQuery处理动画积累的方法

最新推荐文章于 2024-08-30 10:25:23 发布

周帅帅Love

最新推荐文章于 2024-08-30 10:25:23 发布

阅读量546

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery处理动画积累问题

本文链接：https://blog.youkuaiyun.com/qq_36982349/article/details/82970627

jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用jQuery控制动画，避免动画积累导致的问题。通过两种策略实现：一是立即执行新任务并停止旧任务；二是只有当元素静止时才接受新任务。文章提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery防止动画积累

一个元素身上可以存在多个动画事件，尤其是在不经意间就会造成动画积累，此时我们就要防止(也叫防流氓)
比如：现有一个队伍在上海，接到了命令，前往北京，在去北京的路上又接到了命令，回上海。
此时这支队伍有两个策略：
①：立即执行新的任务，放弃原有任务
利用**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: red;
		}
	</style>
</head>
<body>
	<button id="btn1">回北京</button>
	<button id="btn2">去广州</button>
	<div id="box"></div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// 去广州
	$("#btn2").click(function() {
		$("#box").stop(true).animate({"left": 1000}, 2000);
	})

	// 回北京
	$("#btn1").click(function() {
		$("#box").stop(true).animate({"left": 50}, 2000);
	})
	</script>
</body>
</html>

②只有当元素不运动的时候，才接受新的任务
is()：表示元素是否具备某种状态
is(":animated") 表示当元素运动的时候返回true，当元素不运动的时候返回false

举例

<!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: red;
		}
	</style>
</head>
<body>
	<button id="btn1">回北京</button>
	<button id="btn2">去广州</button>
	<div id="box"></div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// 当元素运动的时候， 不接受新的任务
	$("#btn2").click(function() {
		// 当元素运动的时候，不接受任务
		if ($("#box").is(":animated")) {
			return;
		}
		// 当元素不运动的时候，才接受新的任务
		$("#box").animate({"left": 1000}, 2000);
	})


	// 当元素不运动的时候， 才接受新的任务
	$("#btn1").click(function() {
		if (!$("#box").is(":animated")) {
			$("#box").animate({"left": 50}, 2000);
		}
	})
	</script>
</body>
</html>