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);
});
});