首頁 > 開發者 > JavaScript
標籤：har object 預設 option asc 基礎 隱藏 order input
animate() 方法執行 CSS 屬性集的自訂動畫。
該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。
只有數字值可建立動畫（比如 "margin:30px"）。字串值無法建立動畫（比如 "background-color:red"）。
範例程式碼：
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> p { color: red; } div{ width:200px; height: 100px; background-color: yellow; color:red; } </style> <script src="../Jquery/jquery-3.3.1.js"></script></head><body><h2>animate(上)</h2><p>慕課網,專註分享</p><div id="aaron" style="border:1px solid red">內部動畫</div>點擊觀察動畫效果：<select id="animation"> <option value="1">動畫1</option> <option value="2">動畫2</option> <option value="3">動畫3</option> <option value="4">動畫4</option></select><input id="exec" type="button" value="執行動畫"><script type="text/javascript"> /** * animate()方法允許我們在任意的數值的CSS屬性上建立動畫。 * 2種文法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性索引值對。 * * 注意每個css屬性後面都有個逗號！！！！ * * * * 一個或多個css屬性的索引值對所構成的Object對象。要特別注意所有用於動畫的屬性必須是數位!!!!! */ $("#exec").click(function() { var v = $("#animation").val(); var $aaron = $("#aaron"); if (v == "1") { // 數值的單位預設是px $aaron.animate({//css屬性是一組，需要用大括弧擴起來 width :300, height :300 },3000,function () { alert("完畢") }); } else if (v == "2") { // 在現有高度的基礎上增加100px $aaron.animate({ width : "+=100px", height : "+=100px" }); } else if (v == "3") { $aaron.animate({ fontSize: "5em" }, 2000, function() { alert("動畫 fontSize執行完畢!"); }); } else if (v == "4") { //通過toggle參數切換高度 $aaron.animate({ // width: "toggle" , //在此利用寬度來隱藏元素 borderWidth: "6px" //加邊框 }); } });</script></body></html>
<JavaScript>自訂動畫
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
