Jquery效果函數

標籤：

jQuery 效果函數

方法	描述
animate()	對被選元素應用“自訂”的動畫
clearQueue()	對被選元素移除所有排隊的函數（仍未啟動並執行）
delay()	對被選元素的所有排隊函數（仍未運行）設定延遲
dequeue()	運行被選元素的下一個排隊函數
fadeIn()	逐漸改變被選元素的不透明度，從隱藏到可見
fadeOut()	逐漸改變被選元素的不透明度，從可見到隱藏
fadeTo()	把被選元素逐漸改變至給定的不透明度
hide()	隱藏被選的元素
queue()	顯示被選元素的排隊函數
show()	顯示被選的元素
slideDown()	通過調整高度來滑動顯示被選元素
slideToggle()	對被選元素進行滑動隱藏和滑動顯示的切換
slideUp()	通過調整高度來滑動隱藏被選元素
stop()	停止在被選元素上運行動畫
toggle()	對被選元素進行隱藏和顯示的切換

2.jQuery 效果 - animate() 方法

 

執行個體

改變 "div" 元素的高度：

$(".btn1").click(function(){  $("#box").animate({height:"300px"});});

 

定義和用法

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

該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。

只有數字值可建立動畫（比如 "margin:30px"）。字串值無法建立動畫（比如 " padding: 0px;">文法 1

$(selector).animate(styles,speed,easing,callback)

參數	描述
styles	必需。規定產生動畫效果的 CSS 樣式和值。 可能的 CSS 樣式值（提供執行個體）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注釋：CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設定，而非 CSS 名稱（比如 "font-size"）。
speed	可選。規定動畫的速度。預設是 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"
easing	可選。規定在不同的動畫點中設定動畫速度的 easing 函數。 內建的 easing 函數： swing linear 擴充外掛程式中提供更多 easing 函數。
callback	可選。animate 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 。

文法 2

$(selector).animate(styles,options)

參數	描述
styles	必需。規定產生動畫效果的 CSS 樣式和值（同上）。
options	可選。規定動畫的額外選項。 可能的值： speed - 設定動畫的速度 easing - 規定要使用的 easing 函數 callback - 規定動畫完成之後要執行的函數 step - 規定動畫的每一步完成之後要執行的函數 queue - 布爾值。指示是否在效果隊列中放置動畫。如果為 false，則動畫將立即開始 specialEasing - 來自 styles 參數的一個或多個 CSS 屬性的映射，以及它們的對應 easing 函數

3.jQuery 效果 - clearQueue() 方法

 

執行個體

停止當前正在啟動並執行動畫：

$("#stop").click(function(){  $("#box").clearQueue();});

 

定義和用法

clearQueue() 方法停止隊列中所有仍未執行的函數。

與 stop() 方法不同，（只適用於動畫），clearQueue() 能夠清除任何排隊的函數（通過 .queue() 方法添加到通用 jQuery 隊列的任何函數）。

文法

$(selector).clearQueue(queueName)

參數	描述
queueName	可選。規定要停止的隊列的名稱。 預設是 "fx"，標準效果隊列。

4.jQuery 效果 - fadeIn() 方法

 

執行個體

使用淡入效果來顯示一個隱藏的 <p> 元素：

$(".btn2").click(function(){  $("p").fadeIn();});

 

定義和用法

fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。

文法

$(selector).fadeIn(speed,callback)

參數	描述
speed	可選。規定元素從隱藏到可見的速度。預設為 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素從隱藏到可見的過程中，會逐漸地改變其透明度（這樣會創造淡入效果）。
callback	可選。fadeIn 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

提示和注釋

提示：如果元素已經顯示，則該效果不產生任何變化，除非規定了 callback 函數。

注釋：該效果適用於通過 jQuery 隱藏的元素，或在 CSS 中聲明 display:none 的元素（但不適用於 visibility:hidden 的元素）。

5.jQuery 效果 - fadeOut() 方法

 

執行個體

使用淡出效果來隱藏一個 <p> 元素：

$(".btn1").click(function(){  $("p").fadeOut();});

 

定義和用法

fadeOut() 方法使用淡出效果來隱藏被選元素，假如該元素是隱藏的。

文法

$(selector).fadeOut(speed,callback)

參數	描述
speed	可選。規定元素從可見到隱藏的速度。預設為 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其透明度（這樣會創造淡出效果）。
callback	可選。fadeOut 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

提示和注釋

提示：如果元素已經隱藏，則該效果不產生任何變化，除非規定了 callback 函數。

6.jQuery 效果 - fadeTo() 方法

 

執行個體

使用淡出效果來隱藏一個 <p> 元素：

$(".btn1").click(function(){  $("p").fadeTo(1000,0.4);});

 

定義和用法

fadeTo() 方法將被選元素的不透明度逐漸地改變為指定的值。

文法

$(selector).fadeTo(speed,opacity,callback)

參數	描述
speed	可選。規定元素從當前透明度到指定透明度的速度。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"
opacity	必需。規定要淡入或淡出的透明度。必須是介於 0.00 與 1.00 之間的數字。
callback	可選。fadeTo 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

7.jQuery 效果 - hide() 方法

 

執行個體

隱藏可見的 <p> 元素：

$(".btn1").click(function(){  $("p").hide();});

 

定義和用法

如果被選的元素已被顯示，則隱藏該元素。

文法

$(selector).hide(speed,callback)

參數	描述
speed	可選。規定元素從可見到隱藏的速度。預設為 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。
callback	可選。hide 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

提示和注釋

提示：如果元素已經是完全可見，則該效果不產生任何變化，除非規定了 callback 函數。

8.jQuery 效果 - show() 方法

 

執行個體

顯示出隱藏的 <p> 元素。

$(".btn2").click(function(){  $("p").show();});

 

定義和用法

如果被選元素已被隱藏，則顯示這些元素：

文法

$(selector).show(speed,callback)

參數	描述
speed	可選。規定元素從隱藏到完全可見的速度。預設為 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素從隱藏到完全可見的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。
callback	可選。show 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

提示和注釋

提示：如果元素已經是完全可見，則該效果不產生任何變化，除非規定了 callback 函數。

注釋：該效果適用於通過 jQuery 隱藏的元素，或在 CSS 中聲明 display:none 的元素（但不適用於 visibility:hidden 的元素）。

9.jQuery 效果 - slideDown() 方法

 

執行個體

以滑動方式顯示隱藏的 <p> 元素：

$(".btn2").click(function(){  $("p").slideDown();});

 

定義和用法

slideDown() 方法通過使用滑動效果，顯示隱藏的被選元素。

文法

$(selector).slideDown(speed,callback)

參數	描述
speed	可選。規定元素從隱藏到可見的速度（或者相反）。預設為 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素從隱藏到可見的過程中，會逐漸地改變其高度。
callback	可選。slideDown 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

提示和注釋

提示：如果元素已經是完全可見，則該效果不產生任何變化，除非規定了 callback 函數。

注釋：該效果適用於通過 jQuery 隱藏的元素，或在 CSS 中聲明 display:none 的元素（但不適用於 visibility:hidden 的元素）。

10.jQuery 效果 - slideToggle() 方法

 

執行個體

通過使用滑動效果，在顯示和隱藏狀態之間切換 <p> 元素：

$(".btn1").click(function(){  $("p").slideToggle();});

 

定義和用法

slideToggle() 方法通過使用滑動效果（高度變化）來切換元素的可見狀態。

如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。

文法

$(selector).slideToggle(speed,callback)

參數	描述
speed	可選。規定元素從隱藏到可見的速度（或者相反）。預設為 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素在切換的過程中，會逐漸地改變其高度（這樣會創造滑動效果）。
callback	可選。toggle 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

提示和注釋

提示：如果元素已經隱藏，則該效果不產生任何變化，除非規定了 callback 函數。

11.jQuery 效果 - slideUp() 方法

 

執行個體

以滑動方式隱藏 <p> 元素：

$(".btn1").click(function(){  $("p").slideUp();});

定義和用法

通過使用滑動效果，隱藏被選元素，如果元素已顯示出來的話。

文法

$(selector).slideUp(speed,callback)

參數	描述
speed	可選。規定元素從可見到隱藏的速度（或者相反）。預設為 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度（這樣會創造滑動效果）。
callback	可選。slideUp 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。

提示和注釋

提示：如果元素已經隱藏，則該效果不產生任何變化，除非規定了 callback 函數。

12.jQuery 效果 - stop() 方法

 

執行個體

停止當前正在啟動並執行動畫：

$("#stop").click(function(){  $("#box").stop();});

 

定義和用法

stop() 方法停止當前正在啟動並執行動畫。

文法

$(selector).stop(stopAll,goToEnd)

參數	描述
stopAll	可選。規定是否停止被選元素的所有排入佇列的動畫。
goToEnd	可選。規定是否允許完成當前的動畫。 該參數只能在設定了 stopAll 參數時使用。

13.jQuery 效果 - toggle() 方法

 

執行個體

切換 <p> 元素的顯示與隱藏狀態：

$(".btn1").click(function(){  $("p").hide();});

 

定義和用法

toggle() 方法切換元素的可見狀態。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

文法

$(selector).toggle(speed,callback,switch)

參數	描述
speed	可選。規定元素從可見到隱藏的速度（或者相反）。預設為 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。 如果設定此參數，則無法使用 switch 參數。
callback	可選。toggle 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 除非設定了 speed 參數，否則不能設定該參數。
switch	可選。布爾值。規定 toggle 是否隱藏或顯示所有被選元素。   True - 顯示所有元素 False - 隱藏所有元素 如果設定此參數，則無法使用 speed 和 callback 參數。

提示和注釋

注釋：該效果適用於通過 jQuery 隱藏的元素，或在 CSS 中聲明 display:none 的元素（但不適用於 visibility:hidden 的元素）。

Jquery效果函數