自定義影片
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14827.html
標籤：jQuery
上一篇：jQuery---京東輪播圖