相對於JavaScript來說,使用jQuery定義動畫更加方便快速。不過呢,對於動畫效果,我們首選CSS3來實現,其次才是jQuery。
在jQuery中,如果我們想要實現元素的顯示和隱藏,可以使用2組方法:
在jQuery中,如果我們想要實現元素的淡入淡出這種漸變效果,有3組方法:
在jQuery中,如果我們想要實現元素的滑動效果,也有2組方法:
在jQuery中,對於自定義動畫,我們可以使用animate()方法來實現。對於自定義動畫,我們分為2種形式:(1)簡單動畫;(2)累積動畫。
語法:
$().animate(params , speed , callback)
說明:
params,必選參數,表示“屬性:值”列表,也就是元素在動畫中變化的屬性列表(具體形式,參考下面幾個例子);
speed,可選參數,表示動畫的速度,單位為毫秒,默認值為200毫秒。如果參數省略,則采用默認速度;
callback,可選參數,表示動畫完成之後執行的函數(即回調函數)。
此外,animate()方法無法識別color、background-color和border-color這些顏色屬性。因此我們還需要引入一個jquery.color.js來修復這個bug。
在jQuery中,隊列動畫指的是在元素中按照一定的順序執行多個動畫效果,即有多個animate()方法在元素中執行,然後根據這些animate()方法執行的先後順序,形成了動畫隊列,然後按照這個動畫隊列的順序來進行顯示。
語法:
$().animate().animte()…….animte()
說明:
隊列動畫,就是按照animate()方法調用的先後順序來實現的,原理很簡單。
隊列動畫包括之前我們所學到的4種動畫形式:(1)顯示和隱藏;(2)淡入和淡出;(3)滑上和滑下;(4)自定義動畫。
在jQuery中,很多時候我們需要停止當前元素上正在執行的動畫效果,可以使用stop()方法來實現。
語法:
$().stop(clearQueue,gotoEnd)
說明:
參數clearQueue和參數gotoEnd都是可選參數,取值都為布爾值。兩個參數默認值都為false。
參數clearQueue表示是否要清空“未執行”的“動畫隊列”。這裡大家要看准了,清空的是整個“動畫隊列”,而不僅僅是某一個動畫。
參數gotoEnd,表示是否直接將正在執行的動畫跳轉到末狀態。
在jQuery中,如果我們想要對動畫進行延遲操作,可以用delay()方法來實現。
語法:
$().delay(speed)
說明:
參數speed,表示動畫的速度,單位為毫秒。
在jQuery中,我們還可以使用is()方法來判斷所選元素是否正處於動畫狀態,如果元素不處於動畫狀態,則添加新的動畫;如果元素處於動畫狀態,則不添加新的動畫。
語法:
if(!$().is(":animated")) { //如果當前沒有進行動畫,則添加新動畫 }