天天看點

彙總之--jQuery animate()

個人部落格

定義和用法

animate() 方法執行 CSS 屬性集的自定義動畫。

通過 CSS 樣式将元素從一個狀态改變為另一個狀态。

需要注意的是:隻有數字值可建立動畫(比如 “height:30px”)。字元串值無法建立動畫(比如 “background-color:red”)

文法

來自:http://www.cnblogs.com/sntetwt/archive/2014/07/10/3835242.html

(selector).animate({styles},speed,easing,callback)
(selector).animate(params, [duration], [easing], [callback]) 

如果使用的是“hide”、“show”或“toggle”這樣的字元串值,則會為該屬性調用預設的動畫形式。paramsOptions一組包

含作為動畫屬性和終值的樣式屬性和及其值的集合

params 對象{},注意:所有指定的屬性必須用駱駝形式,比如用marginLeft代替margin-left,如果使用的是“hide”、

“show”或“toggle”這樣的字元串值,則會為該屬性調用預設的動畫形式。 

duration (可選)三種預定速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:)

easing (可選)String要使用的擦除效果的名稱(需要插件支援).預設jQuery提供"linear" 和 "swing"

callback (可選)Function在動畫完成時執行的函數
           

動畫停止

stop:

if($('.swaplist,.mainlist').is(':animated')){
    $('.swaplist,.mainlist').stop(true,true);
}
           

方法執行個體:

$("p").animate({
    height: 'toggle', opacity: 'toggle'
}, "slow");
           

繼續閱讀