欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

zepto中的动画(二)

程序员文章站 2022-01-28 21:53:05
...
<!DOCTYPE html>
<html>
<head>
	<title>zepto之动画</title>
	<style type="text/css">
		div{
			position: absolute;
			font-size: 36px;
			width: 100px;
			height: 100px;
			background: red;
			left: 0;
		}
	</style>
</head>
<body>
	<div>123</div>
	<script type="text/javascript" src="../../lib/zepto.min.js"></script>
	<script src="../../lib/fx.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			animate() 动画函数
			$("div").animate({left:"300px"}, 3000, function(){
				alert("动画执行完毕");
			})
			
			$("div").animate({left:"300px", height:"300px"}, 3000, function(){
				alert("动画执行完毕");
			})

			$("div").animate({left:"300px"}, 3000, function(){
				$(this).animate({height: "300px"},3000, function(){
					alert("动画有先后顺序");
				})
			})
		})
	</script>
</body>
</html>
相关标签: 动画