jQquery :animated 给没有动画效果的元素添加动画

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

原创最新推荐文章于 2024-08-30 10:25:23 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

41 篇文章

订阅专栏

jQuery

21 篇文章

订阅专栏

本文介绍了一个使用jQuery的:animated选择器来控制动画效果的简单示例。通过按钮点击触发动画，仅当目标元素未处于动画状态时才执行宽度变化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>:animated</title>
	<style>
		div {
			width:300px;
			height:300px;
			background-color: lightgreen;
		}
	</style>
</head>
	<script src="jquery-3.1.1.js">
	</script>
<body>
	<!--:animated 匹配所有正在执行动画效果的元素-->
	<button id="run">Run</button>
	<div></div>
</body>
<script type="text/javascript">
	$('#run').click(function(){
		$("div:not(:animated)").animate({ width: "+=30" }, 5000);
	});
</script>
</html>