jQuery animate()动画

最新推荐文章于 2023-06-16 00:02:59 发布

ggxr00

最新推荐文章于 2023-06-16 00:02:59 发布

阅读量312

点赞数

文章标签： jquery animate

本文链接：https://blog.youkuaiyun.com/ggxr00/article/details/81077404

版权

animate(params,[speed],[easing],[fn])，用于创建自定义动画的函数

jquery在线手册


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		div{
			width:100px;
			height: 100px;
		}
		.one{
			background-color: red;
		}
		.two{
			background-color: blue;
		}
	</style>
</head>
<body>
	<button>添加属性</button>
	<button>累加属性</button>
	<button>关键字</button>
	<div class="one"></div>
	<div class="two"></div>
	<script src="jquery-1.12.4.js"></script>
	<script>

		/*
		  * animate函数有四个参数:
		  1.要执行的动画属性
		  2.动画时长
		  3.动画效果，默认是swing
		  4.动画执行完毕的回调函数
		*/
		$(function(){
			$("button").eq(0).click(function(){
				$(".one").animate({
					width: 300
				}, 1000, function(){
					alert("动画已执行完毕")
				});

				$(".two").animate({
					width: 300
				}, 1000, "linear", function(){
					alert("动画已执行完毕")
				});
			});

			$("button").eq(1).click(function(){
				$(".one").delay(2000).animate({
					width: "+=100"
				}, 1000, function(){
					alert("动画已执行完毕")
				});
			});

			$("button").eq(2).click(function(){
				
				$(".one").animate({
					width: "hide"
				}, 1000, function(){
					alert("动画已执行完毕")
				});
			});
		})
		
	</script>
</body>
</html>