2018-5-18 seo達人
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
jQuery提供了JS未能提供的動畫效果,利用jQuery的動畫效果,可以極大的簡化JS動畫部分的邏輯
滑入動畫
定義:以下拉方式動畫效果將html內容顯示出來
使用方式:
$(selector).slideDown(time,function)
time代表執行動畫的時間,function代表動畫執行完之后所要執行的函數
滑出動畫
定義:以上滑方式動畫效果將html內容隱藏出來
使用方式:
$(selector).slideUp(time,function)
time代表執行動畫的時間,function代表動畫執行完之后所要執行的函數
滑入滑出切換動畫
定義:在滑入滑出動畫間切換
使用方式:
$(selector).slideToggle(time,function)
淡入動畫
作用:讓元素以淡淡的進入視線的方式展現出來
使用方式
$(selector).fadeIn(time,function)
淡出動畫
作用:讓元素以淡淡的離開視線的方式隱藏起來
使用方式
$(selector).fadeOut(time,function)
淡入淡出切換動畫
作用:讓元素在淡入淡出動畫切換
使用方式
$(Selector).fadeToggle(time,function)
修改opacity
作用: 修改opacity的值
使用方式
$(Selector).fadeTo(time,opacity,function)
顯示動畫
作用: 將Html結構顯現出來
使用方式
$(Selector).show(time,function)
隱藏動畫
作用: 將Html結構隱藏起來
使用方式
$(Selector).hide(time,function)
定義:停止正在執行的動畫
使用方式:
$(selector).stop()
作用:執行一組CSS屬性的自定義動畫
使用方式:
$(selector).animate({CSS定義},time,function())
背景
滑入滑出動畫
$(selector).slideDown(2000)
$(selector).slideDown()
$(selector).slideDown(fast/normal/slow)
$(selector).slideUp(2000)
$(selector).slideUp()
$(selector).slideUp(fast/normal/slow)
$(selector).slideToggle(2000)
$(selector).slideToggle()
$(selector).slideToggle(fast/normal/slow)
淡入淡出動畫
$(selector).fadeIn(2000)
$(selector).fadeIn()
$(selector).fadeIn(fast/normal/slow)
$(selector).fadeOut(2000)
$(selector).fadeOut()
$(selector).fadeOut(fast/normal/slow)
$(selector).fadeToggle(2000)
$(selector).fadeToggle()
$(selector).fadeToggle(fast/normal/slow)
time可以是字符串,可以是具體數字
也可只有參數一、參數二
顯示隱藏動畫
$(selector).show(2000)
$(selector).show()
$(selector).show(fast/normal/slow)
$(selector).hide(2000)
$(selector).hide()
$(selector).hide(fast/normal/slow)
停止動畫
stop()中可以有兩個參數,參數一:后續動畫是否執行,參數二:當前動畫是否執行完畢,默認的是(false,false),注意第一個參數,true代表的是后續動畫不執行
————————————————————————————
第一種:(false,false)
后續動畫會執行,當前動畫不會執行完
第二種:(false,true)
后續動畫會執行,當前動畫會執行完
第三種:(true,false)
后續動畫不會執行,當前動畫不會執行完
第四種:(true,true)
后續動畫不會執行,當前動畫會執行完
自定義動畫
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務