自定义动画
animate();
第一个参数：{对象}，里面可以传需要动画的样式
第二个参数：speed 动画的执行时间
第三个参数：easing 动画的执行效果
第四个参数：callback 回调函数
//第一个参数：对象，里面可以传需要动画的样式 $("#box1").animate({ left: 800, height: 200 });
//第二个参数：speed 动画的执行时间 $("#box1").animate({ left: 800 }, 4000);
//第三个参数：动画的执行效果 // //swing:秋千 摇摆 $("#box2").animate({ left: 800 }, 8000, "swing"); // //linear:线性 匀速 $("#box3").animate({ left: 800 }, 8000, "linear");
//第四个参数：回调函数 $("#box3").animate({ left: 800 }, 8000, "linear", function () { console.log("动画执行完毕"); });
合体
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; } #box2 { background-color: blue; margin-top: 150px; } #box3 { background-color: yellowgreen; margin-top: 300px; } </style> </head> <body> <input type="button" value="开始"> <input type="button" value="结束"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //第一个参数：对象，里面可以传需要动画的样式 //第二个参数：speed 动画的执行时间 //第三个参数：动画的执行效果 //第四个参数：回调函数 //swing:秋千 摇摆 $("#box1").animate({ left: 800, height: 200 }); $("#box1").animate({ left: 800 }, 4000); $("#box2").animate({ left: 800 }, 4000, "swing"); $("#box3").animate({ left: 800 }, 4000, "linear", function () { console.log("动画执行完毕"); }); }) }); </script> </body> </html>