在jQuery中，如果我們想要實現元素的顯示和隱藏，可以使用2組方法：
在jQuery中，我們可以使用show()方法來顯示元素，使用hide()方法來隱藏元素。
語法：
$().hide() $().show()
說明：
hide()方法就是把所選元素的display屬性設置為none。
show()方法就是把所選元素的display屬性還原為隱藏之前的顯示狀態（block、inline或者inline-block等）。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_hide").click(function () {
$("img").hide();
});
$("#btn_show").click(function () {
$("img").show();
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br/>
<input id="btn_hide" type="button" value="隱藏" />
<input id="btn_show" type="button" value="顯示" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們點擊“隱藏”按鈕，使用hide()方法隱藏圖片；當我們點擊“顯示”按鈕，使用show()方法顯示圖片。這個例子非常簡單。
$("#btn_hide").click(function () {
$("img").hide();
});
$("#btn_show").click(function () {
$("img").show();
});
上面這段代碼其實等價於：
$("#btn_hide").click(function () {
$("img").css("display" , "none");
});
$("#btn_show").click(function () {
$("img"). css("display" , "block");
});
在jQuery中，我們可以通過在show()和hide()方法中加入相應的參數來實現帶有“動畫效果”的顯示和隱藏。
語法：
$().hide(speed,callback) $(),show(speed,callback)
說明：
參數speed為必選參數，表示動畫執行的速度，單位是毫秒；
參數callback為可選參數（可以省略），表示動畫執行完成之後的“回調函數”。在這裡，所謂的回調函數，說白了就是在動畫執行完成立刻執行的一個函數。對於回調函數，小伙伴們也別想得太復雜，你就把它當做一個普通的匿名函數即可。回調函數在show()和hide()用得不多，我們在“jQuery自定義動畫”這一節會詳細給大家介紹jQuery動畫中“回調函數”的用法。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_hide").click(function () {
$("img").hide(500);
});
$("#btn_show").click(function () {
$("img").show(500);
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br/>
<input id="btn_hide" type="button" value="隱藏" />
<input id="btn_show" type="button" value="顯示" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
這個例子相對上一個例子來說，只是在hide()和show()這兩個方法上面添加了一個速度參數，然後隱藏和顯示就帶上了動畫效果。此外，500毫秒，也就是0.5秒。
在jQuery中，我們還可以使用toggle()方法來“切換”元素的“顯示狀態”。也就是說，如果元素是顯示狀態，則變成隱藏狀態；如果元素是隱藏狀態，則變成顯示狀態。
使用toggle()來顯示和隱藏元素，也有2種使用方式：（1）簡單的toggle()；（2）動畫的toggle()。
語法：
$().toggle() //簡單的toggle() $().toggle(speed , callback); //動畫的toggle()
說明：
參數speed表示動畫執行的速度，單位是毫秒；
參數callback為可選參數（可以省略），表示動畫執行完成之後的“回調函數”。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_toggle").click(function () {
$("img").toggle(500);
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br/>
<input id="btn_toggle" type="button" value="切換" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
從這個例子可以看出，使用toggle()方法來切換元素的顯示狀態，比show ()和hide()方法更加簡單快速。