标签：
定义和用法
此方法可以将匹配元素隐藏。
如果被选的元素已被显示，则隐藏该元素。
| 参数 | 描述 |
|---|---|
| speed |
可选。规定元素从可见到隐藏的速度。默认为 "0"。 可能的值：
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 |
| callback |
可选。hide 函数执行完之后，要执行的函数。 除非设置了 speed 参数，否则不能设置该参数。 |
隐藏当前的 HTML 元素。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="jquery-2.2.0.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $("button").click(function(){ 10 $(this).hide(); 11 }) 12 }) 13 </script> 14 </head> 15 <body> 16 <button type="button">Click me</button> 17 </body> 18 </html>
隐藏 id="test" 的元素，隐藏指定的元素。如指定id名或class名称的元素。（指定id名或class名的元素必须用在元素名前面加“#”或者“.” 和css样式一样）
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="jquery-2.2.0.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $("button").click(function(){ 10 $("#test").hide(); 11 }) 12 }) 13 </script> 14 </head> 15 <body> 16 <h2>This is a heading</h2> 17 <p>This is a paragraph.</p> 18 <p id="test">This is another paragraph.</p> 19 <button type="button">Click me</button> 20 </body> 21 </html>
1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function() 6 { 7 $("button").click(function() 8 { 9 $(".test").hide(); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 16 <h2 class="test">This is a heading</h2> 17 <p class="test">This is a paragraph.</p> 18 <p>This is another paragraph.</p> 19 <button type="button">Click me</button> 20 21 </body> 22 </html>
隐藏所以相同标签元素，如<p>标签
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="jquery-2.2.0.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $("button").click(function(){ 10 $("p").hide(); 11 }) 12 }) 13 </script> 14 </head> 15 <body> 16 <h2>This is a heading</h2> 17 <p>This is a paragraph.</p> 18 <p>This is another paragraph.</p> 19 <button type="button">Click me</button> 20 </body> 21 </html>
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果方法对隐藏效果加以时间限定，那么匹配元素将会在限定的事件内以比较优雅的形式隐藏。例如：
1 $("div").hide(2000)
以上代码可以将所有div元素在2000毫秒(2秒)内隐藏。此方法也可以在隐藏完成后触发一个回调函数。例如:
1 $("div").hide(2000,function(){alert("我隐藏好了")});
实例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.jb51.net/" /> 6 <title>hide()函数-脚本之家</title> 7 <style type="text/css"> 8 div{ 9 color:blue; 10 background-color:green; 11 width:100px; 12 height:100px; 13 margin-top:10px; 14 } 15 </style> 16 <script type="text/javascript" src="jquery-2.2.0.min.js"></script> 17 <script type="text/javascript"> 18 $(document).ready(function(){ 19 $("#first").click(function(){ 20 $(".first").hide(); 21 }) 22 $("#second").click(function(){ 23 $(".second").hide(2000,function(){alert("我隐藏好了")}); 24 }) 25 }) 26 </script> 27 </head> 28 <body> 29 <div class="first"></div> 30 <div class="second"></div> 31 <button id="first">瞬间隐藏</button> 32 <button id="second">优雅的隐藏</button> 33 </body> 34 </html>
标签：
原文地址：http://www.cnblogs.com/zhengfuheidao/p/5152233.html
