jQuery---自定義動畫 animate();
阿新 • • 發佈：2020-08-12
自定義動畫
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>