语法
$(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>
来源: http://www.bubuko.com/infodetail-2741782.html