jQuery - 效果（三）之 显示隐藏
2016-08-08 本文已影响47人
AshengTan
jQuery 中提供了 <code>hide()</code> 方法来隐藏元素、<code>show()</code> 方法来显示元素。
本文目录：
- show()；
- hide()；
- toggle()。
show(speed, callback)
显示所选元素。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
hide(speed, callback)
隐藏所选元素。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
toggle(speed, callback)
oggle() 方法是 hide() 方法和 show() 方法的结合，其即能显示元素，又能隐藏元素。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
代码：
<!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
