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代码：

<span class="tag" style="font-size: 14pt;"><p><span class="pln">CodePlayer<span class="tag"></p><span class="pln"><br/><span class="tag"><p><span class="pln">专注于编程开发技术分享<span class="tag"></p><span class="pln"><br/>隐藏效果：<br/><span class="tag"><select<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"animation"<span class="tag">><span class="pln"><br/>    <span class="tag"><option<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"1"<span class="tag">><span class="pln">hide( )<span class="tag"></option><span class="pln"><br/>    <span class="tag"><option<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"2"<span class="tag">><span class="pln">hide( "slow" )<span class="tag"></option><span class="pln"><br/>    <span class="tag"><option<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"3"<span class="tag">><span class="pln">hide( 3000 )<span class="tag"></option><span class="pln"><br/>    <span class="tag"><option<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"4"<span class="tag">><span class="pln">hide( 1000, complete )<span class="tag"></option><span class="pln"><br/>    <span class="tag"><option<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"5"<span class="tag">><span class="pln">hide( 1000, "linear" )<span class="tag"></option><span class="pln"><br/>    <span class="tag"><option<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"6"<span class="tag">><span class="pln">hide( options )<span class="tag"></option><span class="pln"><br/><span class="tag"></select><span class="pln"><br/><span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"btnShow"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"button"<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"显示"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"btnHide"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"button"<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"隐藏"<span class="pln"> <span class="tag">/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

登录后复制

以下是与hide()函数相关的jQuery示例代码，以演示hide()函数的具体用法：

<span class="com"><span style="font-size: 14pt;">// 【显示】按钮</span><span class="pln"><br/><span style="font-size: 14pt;">$</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"#btnShow"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">click</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">function</span><span class="pun"><span style="font-size: 14pt;">(){</span><span class="pln"><br/><span style="font-size: 14pt;">    $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"p"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">show</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><br/><span class="pun"><span style="font-size: 14pt;">}</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><br/><br/><span class="com"><span style="font-size: 14pt;">//【隐藏】按钮</span><span class="pln"><br/><span style="font-size: 14pt;">$</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"#btnHide"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">click</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">function</span><span class="pun"><span style="font-size: 14pt;">(){</span><span class="pln"><br/><span style="font-size: 14pt;">    </span><span class="kwd"><span style="font-size: 14pt;">var</span><span class="pln"><span style="font-size: 14pt;"> v </span><span class="pun"><span style="font-size: 14pt;">=</span><span class="pln"><span style="font-size: 14pt;"> $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"#animation"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">val</span><span class="pun"><span style="font-size: 14pt;">();</span><span class="pln"><br/><span style="font-size: 14pt;">    </span><span class="kwd"><span style="font-size: 14pt;">if</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"><span style="font-size: 14pt;"> v </span><span class="pun"><span style="font-size: 14pt;">==</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"1"</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">){</span><span class="pln"><br/><span style="font-size: 14pt;">        $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"p"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">hide</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><span style="font-size: 14pt;">     </span><br/><span style="font-size: 14pt;">    </span><span class="pun"><span style="font-size: 14pt;">}</span><span class="kwd"><span style="font-size: 14pt;">else</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">if</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"><span style="font-size: 14pt;">v </span><span class="pun"><span style="font-size: 14pt;">==</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"2"</span><span class="pun"><span style="font-size: 14pt;">){</span><span class="pln"><br/><span style="font-size: 14pt;">        $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"p"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">hide</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"slow"</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><span style="font-size: 14pt;">  </span><br/><span style="font-size: 14pt;">    </span><span class="pun"><span style="font-size: 14pt;">}</span><span class="kwd"><span style="font-size: 14pt;">else</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">if</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"><span style="font-size: 14pt;">v </span><span class="pun"><span style="font-size: 14pt;">==</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"3"</span><span class="pun"><span style="font-size: 14pt;">){</span><span class="pln"><br/><span style="font-size: 14pt;">        $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"p"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">hide</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="lit"><span style="font-size: 14pt;">3000</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><span style="font-size: 14pt;">    </span><br/><span style="font-size: 14pt;">    </span><span class="pun"><span style="font-size: 14pt;">}</span><span class="kwd"><span style="font-size: 14pt;">else</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">if</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"><span style="font-size: 14pt;">v </span><span class="pun"><span style="font-size: 14pt;">==</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"4"</span><span class="pun"><span style="font-size: 14pt;">){</span><span class="pln"><br/><span style="font-size: 14pt;">        $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"p"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">hide</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="lit"><span style="font-size: 14pt;">1000</span><span class="pun"><span style="font-size: 14pt;">,</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">function</span><span class="pun"><span style="font-size: 14pt;">(){</span><span class="pln"><br/><span style="font-size: 14pt;">            alert</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"隐藏完毕!"</span><span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><br/><span style="font-size: 14pt;">        </span><span class="pun"><span style="font-size: 14pt;">}</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><br/><span style="font-size: 14pt;">    </span><span class="pun"><span style="font-size: 14pt;">}</span><span class="kwd"><span style="font-size: 14pt;">else</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">if</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"><span style="font-size: 14pt;">v </span><span class="pun"><span style="font-size: 14pt;">==</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"5"</span><span class="pun"><span style="font-size: 14pt;">){</span><span class="pln"><br/><span style="font-size: 14pt;">        $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"p"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">hide</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="lit"><span style="font-size: 14pt;">1000</span><span class="pun"><span style="font-size: 14pt;">,</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"linear"</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><span style="font-size: 14pt;">  </span><br/><span style="font-size: 14pt;">    </span><span class="pun"><span style="font-size: 14pt;">}</span><span class="kwd"><span style="font-size: 14pt;">else</span><span class="pln"> <span class="kwd"><span style="font-size: 14pt;">if</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"><span style="font-size: 14pt;">v </span><span class="pun"><span style="font-size: 14pt;">==</span><span class="pln"> <span class="str"><span style="font-size: 14pt;">"6"</span><span class="pun"><span style="font-size: 14pt;">){</span><span class="pln"><br/><span style="font-size: 14pt;">        $</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="str"><span style="font-size: 14pt;">"p"</span><span class="pun"><span style="font-size: 14pt;">).</span><span class="pln"><span style="font-size: 14pt;">hide</span><span class="pun"><span style="font-size: 14pt;">(</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">{</span><span class="pln"><span style="font-size: 14pt;"> duration</span><span class="pun"><span style="font-size: 14pt;">:</span><span class="pln"> <span class="lit"><span style="font-size: 14pt;">1000</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">}</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><span class="pln"><span style="font-size: 14pt;">  </span><br/><span style="font-size: 14pt;">    </span><span class="pun"><span style="font-size: 14pt;">}</span><span class="pln"><br/><span class="pun"><span style="font-size: 14pt;">}</span><span class="pln"> <span class="pun"><span style="font-size: 14pt;">);</span><br/><br/><br/><br/><br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

登录后复制

以上是jquery之hide()用法详解的详细内容。更多信息请关注PHP中文网其他相关文章！