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=)