jq-animate

最新推荐文章于 2024-10-30 19:10:39 发布

weixin_34352449

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量50

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/handsomehan/p/5896713.html

版权

jq-animate:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
	*{margin:0; padding:0; list-style:none;}
	.btn{
		font-size: 20px;
		padding: 4px 8px;
	}
	.box{
		width: 140px;
		height: 100px;
		background: green;
		font-size: 24px;
		border: 2px solid blue;
		position: absolute;
		left: 40px;
		top: 60px;
	}
</style>
</head>
<body>
<button class="btn">动画</button>
<div class="box">我是div标签</div>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
	$('.btn').click(function (){
		$('.box').animate({
			left:'1000px'
		},{
			// queue:true,
			duration:1000,
			easing:'swing',
			complete:function (){
				$('.box').css('background','red');
			}
		}).animate({
			top:'500px'
		},{
			// queue:true,
			duration:1000,
			easing:'swing',
			complete:function (){
				$('.box').css('background','blue');
			}
		});
	})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/handsomehan/p/5896713.html