定義和用法
animate() 方法執行 CSS 屬性集的自定義動畫。
該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）
其實就是可以當做是 jquery的css方法一樣來使用,唯一不同的是,如果是用 animate方法的話,這個執行css不是一次性的,例如一個div的寬度從1000變成500,那么是帶有動畫執行的
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn1").click(function(){ $("#box").animate({height:"300px"}); }); $(".btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button class="btn1">Animate</button> <button class="btn2">Reset</button> </body> </html>
效果如下
如果我們只是把上面的代碼里面的animate 換成css ,那么就不帶動畫效果
下面我們來點高級的,設置動畫是否執行隊列,執行時間等等
下面就來一個 點擊按鈕,觸發3個事件
//第一個動畫是寬度到90%, 加入到隊列, 執行時間是7秒 ->但是由於是第一個執行,所以事件一點擊就會執行
//第二個動畫是文字變為120像素,不加隊列,5秒執行完成 -> 由於是不加隊列,這個會和第一個事件一起來執行(也就是寬度會變寬,同時文字還放大,並且文字放大會優先寬度變寬先執行完成)
//第三個動畫是將div的寬度設置為12像素,3秒執行完 ->由於這個沒有標明是否加入隊列,那么默認就是加入隊列中,也就是要等到第一個事件執行完成,才會執行第三個事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <title>animate動畫效果</title> <script type="text/javascript"> $(document).ready(function() { $(".btn1").click(function(){ //第一個動畫是寬度到90%, 加入到隊列, 執行時間是7秒 ->但是由於是第一個執行,所以事件一點擊就會執行 //第二個動畫是文字變為120像素,不加隊列,5秒執行完成 -> 由於是不加隊列,這個會和第一個事件一起來執行(也就是寬度會變寬,同時文字還放大,並且文字放大會優先寬度變寬先執行完成) //第三個動畫是將div的寬度設置為12像素,3秒執行完 ->由於這個沒有標明是否加入隊列,那么默認就是加入隊列中,也就是要等到第一個事件執行完成,才會執行第三個事件 $("#box").animate( { width: "90%"}, { queue: true, duration: 7000 } ) //queue指示是否在效果隊列中放置動畫。如果為 false，則動畫將立即開始 .animate( { fontSize: '120px' } , {queue: false, duration: 5000 } ) .animate( { borderWidth: "12px" }, 3000); }); $(".btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <div id="box" style="background:#98bf21;height:300px;width:100px;margin:6px; border:1px dashed #C36"> 這里是文字 </div> <button class="btn1">Animate</button>
