<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<script src="js/jquery.js"></script>
<style>
.me1{
position: absolute;
left: 20%;
top: 50%;
margin-left: -150px;
margin-top: -75;
width: 400px;
height: 100px;
background-color: orange;
overflow: auto;
padding: 10px;
border: 30px solid lightblue;
}
.me2{
position: absolute;
left: 70%;
top: 50%;
margin-left: -200px;
margin-top: -75;
width: 400px;
height: 100px;
background-color: blue;
overflow: auto;
padding: 10px;
border: 30px solid orange;
}
</style>
<script type="text/javascript">
//页面加载完成简写形式
$(function(){
//animate 第一参数 目标值 第二个参数持续时间
$(".me1").animate({left:"60%",top:"80%",width:"5%",height:"5%",borderWidth:"1px"},
{queue:true, duration: 1000} //queue使用队列动画
)
$(".me1").animate({left:"20%",top:"50%",width:"20%",height:"20%",borderWidth:"30px"},
{queue:true, duration: 1000} //queue使用队列动画
)
})
</script>
</head>
<body>
<div class="me1"></div>
<div class="me2"></div>
</body>
</html>
