jQuery效果|動畫
基本
通過改變元素 高度和寬度 進行顯示或隐藏
show(speed,fn) 顯示
參數1：speed速度。顯示的時間，機關：毫秒。固定字元串：(“slow”,”normal”, or “fast”)
參數2：fn 回調函數。動畫效果完成之後回調函數。
hide() 隐藏
toggle() 切換
滑動
通過改變元素 高度 進行顯示或隐藏
slideDown() 顯示
slideUp() 隐藏
slideToggle() 切換
淡入淡出
通過改變元素 透明度 進行顯示或隐藏
fadeIn() 顯示
fadeOut() 隐藏
fadeToggle() 切換
fadeTo(speed,opacity,fn) 指定透明度
參數2：opacity 透明度，一個0至1之間表示透明度的數字
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:px solid #000;
width:px;
height:px;
}
</style>
<!-- 導入js庫 ，注意：使用src屬性之後，标簽體中不能寫入内容-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("#b1Div").toggle("1000");
});
$("#b2").click(function(){
$("#b2Div").slideToggle("slow");
});
$("#b3").click(function(){
$("#b3Div").fadeToggle("slow");
});
});
</script>
</head>
<body>
<input type="button" id="b1" value="顯示/隐藏 b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="淡出/淡入b3Div" />
<div id="b3Div"></div>
</body>
</html>
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)