jQuery動畫
所有參數名speed可以取"slow","fast"或毫秒
所有參數名callback意思為回調函數，在動畫結束後，就執行該函數的函數體資訊。
1、隐藏/顯示
- hide(speed,callback); //隐藏
- show(speed,callback); //顯示
- toggle(speed,callback); //切換hide()與show()的效果
2、淡出/淡入
- fadeIn(speed,callback); //淡入
- fadeOut(speed,callback); //淡出
- fadeToggle(speed,callback); //切換fadeIn()與fadeOut()的效果
- fadeTo(speed,opacity,callback) //允許漸變為給定的不透明度。opacity參數值介于0與1之間，0最透明。
3、滑動
- slideDown(speed,callback); //滑下
- slideUp(speed,callback); //滑上
- slideToggle(speed,callback); //切換sildeDown()與sildeUp()的效果
4、自定義動畫
animate({params},speed,callback);
①： 預設情況下，所有的HTML元素有一個靜态的位置，且是不可移動的，如需對未知進行操作，要記得首先吧元素的CSS position屬性設定為relative、fixed或absolute!
舉例：
$(function(){
$("button").click(function(){
$("div").animate({
left:'250px',//向右移動250像素
width:'150px',
height:'150px'
},1000);
});
});
<body>
<button>開始動畫</button>
<p>我是段落</p>
<div style="background:green;height:100px;width:100px;position:absolute;"></div>
</body>
② animate()方法幾乎可以可以操作所有CSS屬性，需要記住一件重要的事情：當使用animate()時,必須使用Camel标記法書寫所有的屬性名，比如，必須使用paddimgLeft，而不是padding-left；使用marginRight，而不是margin-right等等。
③ 使用相對值 +=
4、動畫隊列
$(“div”).animate({hight:‘290px’},1000).fadeOut(1000);
5、停止動畫
stop(stopAll,goToEnd);
stopAll參數規定是否應該清楚動畫隊列。預設為false。
goToEnd參數規定是否立即完成目前動畫。預設為false。
舉例：
<script> $(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">開始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止動畫，但完成動作</button>
<p>點選 "開始" 按鈕開始動畫。</p>
<p>點選 "停止" 按鈕停止目前激活的動畫，但之後我們能再動畫隊列中再次激活。</p>
<p>點選 "停止所有" 按鈕停止目前動畫，并清除動畫隊列，是以元素的所有動畫都會停止。</p>
<p>點選 "停止動畫，但完成動作" 快速完成動作，并停止它。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
還有一些動畫的函數未寫。可以參考菜鳥教程jQuery參考手冊下的效果方法！
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)