jQuery(四)動畫
阿新 • • 發佈:2018-12-12
animate():方法執行 CSS 屬性集的自定義動畫 該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。 注意:只有數字值可建立動畫(比如"margin:30px")。字串值無法建立動畫。
語法: 單獨: (selector).animate({styles},speed,easing,callback); styles:必需。規定產生動畫效果的一個或多個 CSS 屬性/值。 speed:可選。規定動畫的速度 easing:可選。規定在動畫的不同點中元素的速度。預設值是 “swing”。 callback:可選。animate 函式執行完之後,要執行的函式
多個: (selector).animate({styles},{options});
$('div').animate
$('div').animate({width:100,height:100},5000,"linear");
示列:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="../js/jquery.js" type="text/javascript"></script> <style type="text/css"> div{ width:100px; height:100px; position:relative; background:red; } </style> </head> <body> <script type="text/javascript"> $(function(){ aa(); function aa() { $('div').animate({left:500,width:200,height:200},3000,'linear'); $('div').animate({top:300,},3000,'linear'); $('div').animate({left:0,},3000,'linear'); $('div').animate({top:0,width:100,height:100},3000,'linear',aa); } }) </script> <div></div> </body> </html>