jQuery动画之自定义动画
Posted yang-wei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery动画之自定义动画相关的知识，希望对你有一定的参考价值。
语法
$(selector).animate({params}, speed, callback);
参数：
- params: 必选，要执行动画的CSS属性。
- speed: 可选，执行动画时长。
- callback: 可选，动画执行完成后，立即执行的回调函数。
作用：
执行一组CSS属性的自定义动画
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画之自定义动画</title>
<style type="text/css">
div{
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var json = {
"width": 500,
"height": 500,
"left": 300,
"top": 300,
"border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
$("div").animate(json, 1000, function(){
$("div").animate(json2, 1000, function(){
alert("动画执行完毕！");
});
});
});
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>以上是关于jQuery动画之自定义动画的主要内容，如果未能解决你的问题，请参考以下文章