有很多函數可以用來實現動畫效果，其中animate函數為最為常見的函數之一。以下為對該函數使用方式的簡要介紹。
animate函數基本形式
通過animate實現動畫效果的基本形式為：
$(selector).animate({params},speed,callback);
其中{params}為必須項，它是一個對象，指明了我們希望指定元素通過動畫效果運行后，其所具有的的CSS樣式，speed和callback則皆為可選項，其中speed指明了動畫運行的速度，其值可為數值類型（如1000表示動畫在1s內變為params指定樣式）、slow以及fast。callback指明動畫運行結束后要執行的函數。
代碼示例：
<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });});</script> </head> <body><button>Start Animation</button><p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html> {params}對象中的變量的多種賦值形式
關于{params}對象中的變量，可以通過如下形式賦值。
絕對值形式
在上文給出的代碼示例便是通過絕對值形式來賦值params對象的
相對值形式
比如說在變量值前面加上“+”“-”等。
代碼示例：
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });});</script> show、hide以及toogle
params對象的變量值，我們同樣可以賦值為以上三個值，比如下面的代碼，其作用便是使div標簽內容消失。
$("button").click(function(){ $("div").animate({ height:'toggle' });}); 以上這篇通過jquery實現頁面的動畫效果(實例代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
