animate()
創建自定義動畫

$("button").click(function(){$("div").animate({left:'250px'}); });

語法格式
$(selector).animate({params},speed,callback);

Params
必選參數，定義形成動畫的CSS屬性

speed
可選參數，規定隱藏/顯示的速度
可以取以下值：”slow”、”fast”或毫秒

callback
可選參數，隱藏或顯示完成后所執行的函數名稱
類似于回調函數
默認情況下，所有HTML元素都有一個靜態位置，且無法移動
如需，對位置進行操作，首先，需要把元素的CSS的position屬性設置為relative、fixed或absolute

操作多個屬性

生成動畫的過程中，可同時使用多個屬性

$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'}); });

書寫格式
當使用animate()時，必須使用Camel標記法，書寫所有的屬性名
比如，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等

使用相對值

定義相對值，相對于元素的當前值
需要在值的前面加上+=或-=

$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'}); });

使用預定義的值

可以把屬性的動畫值設置為”show”、”hide”或”toggle”

$("button").click(function(){$("div").animate({height:'toggle'}); });

使用隊列功能

可以在彼此之后編寫多個animate()調用，jQuery會創建包含這些方法調用的”內部”隊列，然后，逐一運行這些animate調用

$("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow"); });

隊列操作
Queue隊列
隊列是一種特殊的線性表，只允許在表的前端，隊頭進行刪除操作出隊
在表的后端隊尾，進行出入操作入隊，隊列的特點是先進先出，最先插入的元素最先被刪除

總結

以上是生活随笔為你收集整理的jQuery的动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。