[TOC]
## 隱藏顯示
### 1.hide show toggle
```
<div id="id"></div>
<button id="btn1">hide</button>
<button id="btn2">show</button>
<button id="btn3">toggle</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#id").hide(1000)
})
$("#btn2").click(function(){
$("#id").show(1000)
})
$("#btn3").click(function(){
$("#id").toggle(1000)
})
})
</script>
```
### 2.點擊消失
```
<script>
$(document).ready(function () {
for (var i = 0; i < 4; i++) {
$("<div></div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000);
})
})
</script>
```
## 淡入淡出
```
<button id="btn1">fadeOut</button>
<button id="btn2">fadeIn</button>
<button id="btn3">fadeToggle</button>
<button id="btn4">fadeTo</button>
<div id="id"></div> <script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#id").fadeOut(3000)
})
$("#btn2").click(function(){
$("#id").fadeIn(3000)
})
$("#btn3").click(function(){
$("#id").fadeToggle(3000)
})
})
$("#btn4").click(function(){
$("#id").fadeTo(3000,0.5)
//改變透明度
})
</script>
```
## 滑動
```
<div id="show">顯示</div>
<div id="hide">隱藏</div>
<div id="toggle">顯示/隱藏</div>
<div id="content"></div>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#content").slideDown(2000)
})
$("#hide").click(function(){
$("#content").slideUp(2000)
})
$("#toggle").click(function(){
$("#content").slideToggle(2000)
})
})
</script>
```
## 多重效果設置
```
<p>你好呀!我隱藏了又顯示了,同時還改變字體顏色哦</p>
<button id="btn">按鈕</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").css("color","pink").slideUp(2000).slideDown(2000)
})
})
</script>
```
## 回調
```
<p>你好呀!小姐姐</p>
<button id="btn">按鈕</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").css("color","pink").slideUp(2000,function(){
alert("嘻嘻,你被我隱藏了")
})
})
})
</script>
```
