jQuery特效

基礎特效

方法	描述
hide()	當即隱藏jQuery對象內的全部元素
hide(time)、hide(time, easing)	在指定的時間內以動畫方式隱藏jQuery對象內的全部元素，並可選一種緩動風格
hide(time, function)、hide(time, easing, function)	在指定的時間內以動畫方式隱藏jQuery對象內的全部元素，並可選一種緩動風格，且指定一個回調函數在動畫完成以後執行。
show()	讓jQuery對象內全部元素當即可見
show(time)、show(time, easing)	指定時間內以動畫方式顯示出jQuery對象內的全部元素，並可選一種緩動風格
show(time, function)、show(time, easing, function)	指定時間內以動畫方式顯示出jQuery對象內的全部元素，並可選一種緩動風格，且指定一個回調函數在動畫完成以後執行
toggle()	當即切換jQuery對象內全部元素的顯示狀態
toggle(time)、toggle(time, easing)	指定時間內衣動畫放肆切換jQuery對象內的全部元素的顯示狀態，並可選一種緩動風格
toggle(time, function)、toggle(time, easing, function)	指定時間內衣動畫放肆切換jQuery對象內的全部元素的顯示狀態，並可選一種緩動風格，且指定一個回調函數在動畫完成以後執行
toggle(boolean)	單向切換jQuery對象內元素的顯示狀態

        當元素隱藏時，這些元素原先佔據的空間就當即被旁邊的元素擠佔。若是但願隱藏元素而且保留原先佔用的空間，使用CSS的visibility屬性爲hidden。

        對於css設置visibility: hidden，show()方法不起做用須要使用$().css(" visibility ","visiable" ); css設置 visibility: visible,hide()起做用。

 

單向切換

         給toggle方法傳一個布爾值參數，若是是true，jQuery對象中本來隱藏的元素就會顯示出來(本來現實的元素不會隱藏)。若是是false，則本來顯示的元素會隱藏起來。

動畫持續時間參數

         可使number十進制整數，slow（600ms）、fast（200ms），默認爲normal（400ms）。當使用number時，必定不能加引號。不然參數將被忽略。

動畫方式

         swing方式播放動畫時，動畫起始比較慢，逐漸加快，在接近動畫終點時有逐漸變慢。默認值。

        linear方式播放動畫比較勻速。

        所謂的動畫效果就是在水平和垂直方向上減少/增長圖片尺寸，並同時提升/減少透明度。

回調函數

         使用回調函數生成循環動畫，若是讓函數本身調用本身，很快就會耗光JavaScript的調用棧，從而致使腳本中止運行。解決這個問題最簡單的方式是使用setTimeOut函數，$().toggle（"slow",setTimeOut(fn, 1)）實際上這個定時器避免了遞歸調用，根本不可能耗光JavaScript的調用棧。必定要謹慎使用finish方法。

        將函數自身回調函數設爲自身方法可建立循環動畫。

滑動特效

方法	描述
slideDown()、slideDown(time, function)、slideDown(time，easing，function)	讓元素自上而下逐漸顯示出來
slideUp()、slideUp(time, function)、slideUp(time，easing， function)	讓元素自下而上逐漸消失
slideToggle()、slideToggle(time， function)、slideToggle(time，easing，function)	使用滑動特效翻轉元素的顯示狀態

 

淡入淡出特效

        淡入淡出特效是值經過減少或者增長元素的不透明度來隱藏或者顯示元素。

方法	描述
fadeOut() 、fadeOut(timespan)、fadeOut(timespan， function)、fadeOut(timespan， easing， function)	以淡出(增長透明度)的方式隱藏元素
fadeIn()、fadeIn(timespan)、fadeIn(timespan, function)、fadeIn(timespan， easing， function)	以淡入(減少透明度)的方式把元素顯示出來
fadeTo(timespan, opacity)、fadeTo(timespan, opacity,  function)、fadeTo(timespan， opacity， easing， function)	增長或者減小透明度到指定大小，不會改變元素的可見性
fadeToggle()、fadeToggle(timespan)、fadeToggle(timespan, function)、fadeToggle(timespan， easing， function)	以改變透明度的方式反轉元素的顯示狀態

定製特效

方法	描述
animation(properties)、animation(properties，time)、animation(properties，time，function)、animation(properties，time，easing， function)、	利用一個或多個CSS屬性實現動畫，支持可選的動畫持續時間、緩動風格以及回調函數
animation(properties，options)	利用一個或多個CSS屬性實現動畫，使用映射對象指定各個選項

        可使用絕對值，也可使用相對值(如：{left："+=100"})來設置動畫屬性。

 

動畫隊列

方法	描述
queue()	返回針對jQuery對象內元素的正在執行的動畫隊列
queue(function)	在動畫隊列的末尾添加一個動畫(函數)
dequeue()	從針對jQuery對象內元素的正在執行的動畫隊列中取出第一個動畫並執行這個動畫
stop()、stop(clear)、stop(clear， jumpToEnd)、finish()	中止當前動畫並清理動畫隊列
delay(time)	在兩個動畫之間插入一段延時

        使用queue方法來檢視動畫隊列中的內容，若是一個動畫正在執行，他在隊列中的字符串值是inprogress。若是一個動畫還沒有開始，那麼它是隊列中一個即將被調用的函數。

中止動畫

         咱們可使用stop和finish方法中斷正在播放的動畫。

        stop支持兩個可選布爾型參數，若是第一個參數值爲true，就會刪除隊列中的全部其餘動畫，若是第二個參數爲true，正在播放的動畫會瞬間抵達動畫終點(各CSS屬性的目標值)。這兩個參數默認都是false，也就是說只有當前正在播放的動畫被從隊列中刪除，而且各個CSS屬性的值會保持爲動畫被打斷瞬間的值。若是沒有清理動畫，會跳到下一個動畫，並正常執行它。

        finish相似stop方法，處理CSS屬性方式不一樣，調用stop時，CSS屬性會從當前動畫一會兒蹦到當前動畫的終點，而是用finish方法時，全部正在參與當前動畫的CSS屬性以及全部隊列中等待執行的動畫效果都會一步執行到終點。finish方法執行時，並不能阻止新動畫添加到隊列，所以沒法跟蹤動畫隊列的狀態，javascript調用棧很快就會耗光，爲避免這種狀況，增長一個變量，在觸發finish事件時，設置該變量爲適當的值。當須要添加新動畫到隊列時，先檢查finishAnimation變量的值。

啓用或者禁用動畫特效

         $.fx.off屬性設爲true，從而禁用動畫特效。

         若是禁用了動畫特效，調用特效方法將會致使元素瞬間變換爲參與動畫的各CSS屬性的目標值。在禁用動畫的狀態下，遞歸調用特效方法將很快耗光JavaScript的調用棧，可以使用setTimeOut方法代替遞歸調用。

來自爲知筆記(Wiz)