標籤：時間長度 idt html css selector 自訂動畫 function char fun
文法$(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動畫之自訂動畫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
