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: 50px;
height: 50px;
float: left;
margin: 2px;
}
#d4,#d5,#d6,#d7{
width: 100%;
height: 15px;
padding: 5px;
background-color: bisque;
text-align: center;
margin:1px;
}
#d5{
padding: 50px;
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=0;i<5;i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(1000,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); //参数:所需时间 1000毫秒即1秒
});
//显示
$("#b2").click(function () {
$("#p1").show(1000); //参数:所需时间 毫秒
});
//隐藏&显示
$("#b3").click(function () {
$("#p1").toggle(1000); //参数:所需时间 毫秒
});
//淡入
$("#b4").on("click",function(){
$("#d1").fadeIn(1000),
$("#d2").fadeIn(1000),
$("#d3").fadeIn(1000)
});
//淡出
$("#b5").on("click",function(){
$("#d1").fadeOut(1000),
$("#d2").fadeOut(1000),
$("#d3").fadeOut(1000)
});
//淡入&淡出
$("#b6").on("click",function(){
$("#d1").fadeToggle(1000),
$("#d2").fadeToggle(1000),
$("#d3").fadeToggle(1000)
});
//透明度变化
$("#b7").on("click",function(){
$("#d1").fadeTo(1000 ,0.8),
$("#d2").fadeTo(1000,0.5),
$("#d3").fadeTo(1000,0.1)
});
//滑动出现
$("#d4").click(function(){
$("#d5").slideDown(1000);
});
//滑动隐藏
$("#d6").click(function(){
$("#d5").slideUp(1000);
});
//滑动隐藏&出现
$("#d7").click(function(){
$("#d5").slideToggle(1000);
});
//回调，
$("#b8").click(function(){
//$("#p2").hide(1000, function () {
//alert("动画完成，执行了回调函数")；
//});
//执行多个动画
$("#p2").css("color","red").slideUp(1000).slideDown(1000);
});
});