jQuery 中提供了 <code>hide()</code> 方法來(lái)隱藏元素、<code>show()</code> 方法來(lái)顯示元素。
本文目錄：
- show()；
- hide()；
- toggle()。
show(speed, callback)
顯示所選元素。
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| speed | String/Number | 可選。動(dòng)畫(huà)時(shí)長(zhǎng)，預(yù)設(shè)值為 "slow"（600）、"normal"（默認(rèn)值，400）、"fast"（200），也可自定義動(dòng)畫(huà)時(shí)長(zhǎng)，單位為毫秒（如：1000）。 |
| callback | Function() | 可選。動(dòng)作完成后執(zhí)行的函數(shù)。 |
hide(speed, callback)
隱藏所選元素。
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| speed | String/Number | 可選。動(dòng)畫(huà)時(shí)長(zhǎng)，預(yù)設(shè)值為 "slow"（600）、"normal"（默認(rèn)值，400）、"fast"（200），也可自定義動(dòng)畫(huà)時(shí)長(zhǎng)，單位為毫秒（如：1000）。 |
| callback | Function() | 可選。動(dòng)作完成后執(zhí)行的函數(shù)。 |
toggle(speed, callback)
oggle() 方法是 hide() 方法和 show() 方法的結(jié)合，其即能顯示元素，又能隱藏元素。
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| speed | String/Number | 可選。動(dòng)畫(huà)時(shí)長(zhǎng)，預(yù)設(shè)值為 "slow"（600）、"normal"（默認(rèn)值，400）、"fast"（200），也可自定義動(dòng)畫(huà)時(shí)長(zhǎng)，單位為毫秒（如：1000）。 |
| callback | Function() | 可選。動(dòng)作完成后執(zhí)行的函數(shù)。 |
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_顯示隱藏</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">顯示</button>
<button id="btn2">隱藏</button>
<button id="btn3">顯示/隱藏</button>
<script>
$(function () {
// 顯示
$("#btn1").click(function () {
$("#div1").show("slow");
});
// 隱藏
$("#btn2").click(function () {
$("#div1").hide("fast");
});
// 顯示/隱藏
$("#btn3").click(function () {
$("#div1").toggle(1000);
});
});
</script>
</body>
</html>
效果演示：
顯示隱藏.gif
