jquery之hide()用法詳解

來源：懂視網責編：小采時間：2020-11-27 20:17:46

jquery之hide()用法詳解

jquery之hide()用法詳解:注：以下函數用法和hide()類似 [參數類型完全一樣]toggle() hide() show()slideToggle() slideUp() slideDown()fadeToggle() fadeOut() fadeIn() jQuery.hide() 函數詳解hide()函數用于隱藏所有匹配的元素。此外，你還可以指定元素隱藏

推薦度：

點擊下載本文 文檔為doc格式

導讀jquery之hide()用法詳解:注：以下函數用法和hide()類似 [參數類型完全一樣]toggle() hide() show()slideToggle() slideUp() slideDown()fadeToggle() fadeOut() fadeIn() jQuery.hide() 函數詳解hide()函數用于隱藏所有匹配的元素。此外，你還可以指定元素隱藏

注：以下函數用法和hide()類似 [參數類型完全一樣]

toggle()　　

　　hide()

　　show()

slideToggle()

　　slideUp()

　　slideDown()

fadeToggle()

　　fadeOut()

　　fadeIn()

jQuery.hide() 函數詳解

hide()函數用于隱藏所有匹配的元素。此外，你還可以指定元素隱藏的過渡動畫效果。

如果元素本身是不可見的，則不對其作任何改變。如果元素是可見的，則將其隱藏。

與該函數相對的是show()函數，用于顯示所有匹配的元素。

該函數屬于jQuery對象(實例)。

語法

jQuery 1.0 新增該函數。hide()函數主要有以下兩種形式的用法：

用法一：jQuery 1.4.3 新增支持參數easing。

jQueryObject.hide( [ duration ] [, easing ] [, complete ] )

用法二：

jQueryObject.hide( options )

用法二是用法一的變體。以對象形式指定所需的選項參數(可指定比用法一更多的選項參數)。

參數

參數	描述
duration	可選/String/Number類型指定過渡動畫運行多長時間(毫秒數)，默認值為400。該參數也可以為字符串"fast"(=200)或"slow"(=600)。
easing	可選/String類型指定使用何種動畫效果，默認為"swing"，還可以設為"linear"或其他自定義的動畫樣式的函數名稱。 swing:擺動效果（秋千），兩邊慢，中間快。linear: 線性
complete	可選/Function類型元素隱藏完畢后需要執行的函數。函數內的`this`指向當前DOM元素。
options	Object類型指定的選項參數對象。

如果沒有為hide()指定任何參數，則將以最快方式直接隱藏元素，不使用動畫效果。

參數options對象可以識別如下的屬性(以下屬性均是可選的)：

屬性	屬性描述
duration	參見參數`duration`。
easing	參見參數`easing`。
complete	參見參數`complete`。
queue	Boolean類型指示是否將動畫放入效果隊列中，默認為`true`。從1.7版本開始，該參數可以為字符串，用于放入指定名稱的效果隊列。如果你指定的隊列不會自動開始，你需要手動調用dequeue("queueName")來啟動隊列。

此外，jQuery 1.4 和 1.8 還為參數options新增了許多新的選項支持，但這些參數并不常用，此處不再贅述，詳見jQuery官方文檔。

返回值

hide()函數的返回值為jQuery類型，返回當前jQuery對象本身。

示例&說明

請參考下面這段初始HTML代碼：

<p>CodePlayer</p>
<p>專注于編程開發技術分享</p>
隱藏效果：
<select id="animation">
 <option value="1">hide( )</option>
 <option value="2">hide( "slow" )</option>
 <option value="3">hide( 3000 )</option>
 <option value="4">hide( 1000, complete )</option>
 <option value="5">hide( 1000, "linear" )</option>
 <option value="6">hide( options )</option>
</select>
<input id="btnShow" type="button" value="顯示" />
<input id="btnHide" type="button" value="隱藏" />

以下是與hide()函數相關的jQuery示例代碼，以演示hide()函數的具體用法：

// 【顯示】按鈕
$("#btnShow").click( function(){
 $("p").show( );
} );//【隱藏】按鈕
$("#btnHide").click( function(){
 var v = $("#animation").val();
 if( v == "1" ){
 $("p").hide( ); 
 }else if(v == "2"){
 $("p").hide( "slow" ); 
 }else if(v == "3"){
 $("p").hide( 3000 ); 
 }else if(v == "4"){
 $("p").hide( 1000, function(){
 alert("隱藏完畢!");
 } );
 }else if(v == "5"){
 $("p").hide( 1000, "linear" ); 
 }else if(v == "6"){
 $("p").hide( { duration: 1000 } ); 
 }
} );