[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>
```
