?1. show和hide方法
- ("element").show(speed[, callback])-顯示element元素
- ("element").hide(speed[, callback])-隱藏element元素
[speed] 可取 slow normal fast 或者 直接輸入數字(單位:毫秒)
[callback] 動畫完成時執行的回調函數,每個元素執行一次
注意:
(1)show() 和 hide() 方法同時修改多個樣式屬性即高度、寬度和不透明度
(2)hide() 方法在將內容的 display 屬性值設置為 none 之前,會記住原先的 display 屬性值,當調用 show() 方法時,會根據之前記住的值來顯示元素
?2.淡入淡出: fadeIn方法和fadeOut方法
- ("element").fadeIn(speed[, callback])-漸入,在指定事件內增加元素的不透明度
- ("element").fadeOut(speed[, callback])-漸出,在指定事件內降低元素的不透明度
- fadeTo(speed,opcity,[callback]) //speed,[callback]與show()類似,opcity為透明度,范圍0.0-1.0
- fadeToggle(speed, [callback])-淡入淡出切換
注意:
fadeIn() 和 fadeOut() 方法只改變元素的不透明度
?3. 滑動:slideUp方法和slideDown方法
- ("element").slideUp(speed[, callback])-元素由下到上縮短隱藏
- ("element").slideDown(speed[, callback])-元素由上至下延伸顯示
- slideToggle(speed, [callback])-滑動切換
注意:
slideUp() 和 slideDown() 只改變元素的高度
?4. 動畫參數
- 在 jQuery 中的任何動畫效果,都可以指定 3 種速度參數,即 “slow”、“normal” 和 “fast”(時間長度分別是 0.6 秒、0.4 秒和 0.2 秒);也可以使用數組作為時間參數(單位:毫秒)
?5. 自定義動畫
animate(params, [speed], [easing], [callback]);
params 動畫屬性集合
[speed] 動畫的速度,slow,normal,fast,或者數字(單位毫秒)
[easing] 動畫表現效果,swing 或者 linear
[callback] 動畫完成時執行的回調函數,每個元素執行一次
注意:
一個元素可以執行多個animate,從而形成動畫隊列,依次執行
?6. 停止動畫和判斷是否處于動畫狀態
(1)停止元素的動畫
- stop([clearQueue],[gotoEnd]);
參數都為可選參數
clearQueue表示boolean值,是否清空未執行完的動畫隊列
gotoEnd表示boolean值,是否立即完成正在執行的動畫
(2)判斷元素是否處于動畫狀態
- (element).is(":animated")
(3)延時動畫
- delay(duration, [queueName])
duration 延時的時間,單位ms
[queueName] 隊列名