1.隐藏
hide() 方法来隐藏 HTML 元素
语法：
$(selector).hide(speed,callback);
参数:
speed:隐藏的速度，可以取以下值："slow"、"fast" ,"normal"或毫秒。
slow->600
normal->400
fast->200
callback:隐藏完成后所执行的函数名称
示例：
<body>
<div id="box1" style="background-color: #00FFFF; 70px;height: 70px;">
</div>
<button id="btn1">hide</button>
<button id="btn2">show</button>
<script type="text/javascript">
$(document).ready(function(){
var $div = $("#box1")
$("#btn1").click(function(){
$div.hide("1000",function(){
console.log("动画结束了")
})
})
})
</script>
</body>
输出：
2.显示
show() 方法来显示 HTML 元素
语法：
$(selector).show(speed,callback);
参数:
speed:隐藏的速度，可以取以下值："slow"、"fast" ,"normal"或毫秒。
slow->600
normal->400
fast->200
callback:隐藏完成后所执行的函数名称
示例：
<body>
<div id="box1" style="background-color: #00FFFF; 70px;height: 70px;">
</div>
<button id="btn1">hide</button>
<button id="btn2">show</button>
<script type="text/javascript">
$(document).ready(function(){
var $div = $("#box1")
// 隐藏
$("#btn1").click(function(){
$div.hide("1000",function(){
console.log("隐藏")
})
})
// 显示
$("#btn2").click(function(){
$div.show("1000",function(){
console.log("显示")
})
})
})
</script>
</body>
输出：
3.一个按钮实现隐藏和显示
toggle()方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素
语法：
$(selector).toggle(speed,callback);
示例：
<body>
<div id="box1" style="background-color: #00FFFF; 70px;height: 70px;">
</div>
<button id="btn1">hide</button>
<button id="btn2">show</button>
<button id="btn3">toggle</button>
<script type="text/javascript">
$(document).ready(function(){
var $div = $("#box1")
// 隐藏
$("#btn1").click(function(){
$div.hide("1000",function(){
console.log("隐藏")
})
})
// 显示
$("#btn2").click(function(){
$div.show("1000",function(){
console.log("显示")
})
})
// 一个按钮实现显示隐藏
$("#btn3").click(function(){
$div.toggle("1000",function(){
console.log("自动切换")
})
})
})
</script>
</body>
输出：
