【jQuery】使用animate()制作自定义动画

初始化有一个类别名为test的div标签,设置了div的样式,当div元素被单击后,在2秒内向右移动300px,而且div放大到原来的两倍。
必须引入jQuery文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义动画</title>
		<style type="text/css">
			.test{
				width: 200px;
				height: 200px;
				position: absolute;
				background: red;
			}
		</style>
		<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="test"></div>
		<script type="text/javascript">
			$(function(){
				$(".test").click(function(){
					$(this).animate({
						left:"300px",
						width:"400px",
						height:"400px"
					},2000);
				});
			});
		</script>
	</body>
</html>
发布了19 篇原创文章 · 获赞 20 · 访问量 492

猜你喜欢

转载自blog.csdn.net/Handsome_gir/article/details/105351544