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;width: 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;width: 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;width: 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>
輸出：
