1、隐藏
hide();
show();
toggle();
2、淡入淡出
slideDown();
slideUp();
slideToggle();
3、回調（當動畫完成後調用）
代碼如下：
HTML 部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>隐藏與顯示、淡入淡出、滑動、回調</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="xiaoguo.js"></script>
<style type="text/css">
div{
background-color: bisque;
width: px;
height: px;
float: left;
margin: px;
}
#d4,#d5,#d6,#d7{
width: %;
height: px;
padding: px;
background-color: bisque;
text-align: center;
margin:px;
}
#d5{
padding: px;
display: none;
background-color: aliceblue;
}
</style>
</head>
<body>
<p id="p1">把我隐藏起來</p>
<button id="b1">隐藏</button>
<button id="b2">顯示</button>
<button id="b3">隐藏/顯示</button>
<br/>
<br/>
<script>
for(var i=;i<;i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(,function(){ //隐藏并沒有删除 是以可以定義函數删除
$("this").remove();
});
});
</script>
<button id="b4">fadeIn</button>
<button id="b5">fadeOut</button>
<button id="b6">fadeToggle</button>
<button id="b7">fadeTo</button>
<br/>
<div id="d1" style="width: 80px;height: 80px;background-color: blanchedalmond;display: none"></div>
<div id="d2" style="width: 80px;height: 80px;background-color: coral;display: none"></div>
<div id="d3" style="width: 80px;height: 80px;background-color: crimson;display: none"></div>
<br/>
<div id="d4">出現</div>
<div id="d6">隐藏</div>
<div id="d7">隐藏&出現</div>
<div id="d5">滑動出來的内容部分</div>
<button id="b8">隐藏回調</button>
<p id="p2">回調測試</p>
</body>
</html>
Javascript部分
/**
* Created by qing on 2015/8/20.
*/
$(document).ready(function(){
//隐藏 并未移除
$("#b1").click(function () {
$("#p1").hide(); //參數:所需時間 1000毫秒即1秒
});
//顯示
$("#b2").click(function () {
$("#p1").show(); //參數:所需時間 毫秒
});
//隐藏&顯示
$("#b3").click(function () {
$("#p1").toggle(); //參數:所需時間 毫秒
});
//淡入
$("#b4").on("click",function(){
$("#d1").fadeIn(),
$("#d2").fadeIn(),
$("#d3").fadeIn()
});
//淡出
$("#b5").on("click",function(){
$("#d1").fadeOut(),
$("#d2").fadeOut(),
$("#d3").fadeOut()
});
//淡入&淡出
$("#b6").on("click",function(){
$("#d1").fadeToggle(),
$("#d2").fadeToggle(),
$("#d3").fadeToggle()
});
//透明度變化
$("#b7").on("click",function(){
$("#d1").fadeTo( ,),
$("#d2").fadeTo(,),
$("#d3").fadeTo(,)
});
//滑動出現
$("#d4").click(function(){
$("#d5").slideDown();
});
//滑動隐藏
$("#d6").click(function(){
$("#d5").slideUp();
});
//滑動隐藏&出現
$("#d7").click(function(){
$("#d5").slideToggle();
});
//回調，
$("#b8").click(function(){
//$("#p2").hide(1000, function () {
//alert("動畫完成，執行了回調函數")；
//});
//執行多個動畫
$("#p2").css("color","red").slideUp().slideDown();
});
});
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)