一个最简单的自定义动画
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$("div").animate(
{
left: '250px'
}
);
})
});
</script>
<style type="text/css">
div {
background: #98bf21;
height: 100px;
100px;
position: absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<p>绿块自动滑到中间</p>
<div>
</div>
</body>
</html>
result：
一个稍微复杂的自定义动画
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$("div").animate(
{
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
}
);
})
});
</script>
<style type="text/css">
div {
background: #98bf21;
height: 100px;
100px;
position: absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<p>div从小到大，从左侧到居中</p>
<div>
</div>
</body>
</html>
result：
