在jQuery中雖然給我們提供了不少的動畫函數,但是這些函數只能實現一些簡單的功能。如果我們想實現一些復雜的動畫,這些函數明顯是不夠不用的,針對這種情況,jQuery給我們提供了一個自定義的動畫函數animate()函數

jQuery中animate()方法解釋

animate():方法可以執行CSS屬性集的自定義動畫,此方法可以通過CSS的屬性從一個狀態轉換成自定義的目標狀態

語法

$(selector).animate(styles,speed,easing,callback)

注:

style:必選,規定產生動畫效果的CSS樣式和值

国产视频appspeed:可選,規定動畫的速度

easing:可選,規定在不同動畫點中設置動畫的速度

callback:可選,animate()執行完后,要執行的函數

舉例說明一下

利用animate()方法,改變DIV的高度和寬度

HTML代碼

JQ中的animate()動畫

<div style="width:400px;height:300px;background-color:green;">
</div>
<button id='button'>開始</button>
<!--飛鳥慕魚博客-->

JQ代碼

$("#button").click(function () {
    $("div").animate({width:"800px",height:"20px"},3000)
    .delay(2000)//兩個動畫之間的延遲
    .animate({ width: "600px", height: "400px" }, 3000);
});

代碼說明:

這里設置了兩個動畫,執行完第一個動畫后再執行第二個動畫,如果下面還有,會依次執行下去

.delay(2000),表示兩個動畫之間的延遲時間,以毫秒為單位,可以自定義的