有很多函數可以用來實現動畫效果，其中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實現頁面的動畫效果(實例代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。
更多透過jquery實現頁面的動畫效果(實例代碼)相關文章請關注PHP中文網！
