1. 隐藏與顯示
文法:
- $(selector).hide(speed,callback);
- $(selector).show(speed,callback);
- $(selector).toggle(speed,callback);
- 可選的 speed 參數規定隐藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
- 可選的 callback 參數是隐藏或顯示完成後所執行的函數名稱。
2. 淡入和淡出
- $(selector).fadeIn(speed,callback);
- $(selector).fadeOut(speed,callback);
- $(selector).fadeToggle(speed,callback);
- $(selector).fadeTo(speed,opacity,callback);
- jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
- 如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
- 如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
- jQuery fadeTo() 方法允許漸變為給定的不透明度（值介于 0 與 1 之間）。
- fadeTo() 方法中 speed、opacity 必需。
3. 滑動
- $(selector).slideDown(speed,callback); 向下滑動元素
- $(selector).slideUp(speed,callback); 向上滑動元素
- $(selector).slideToggle(speed,callback); 上下滑動之間切換
4. 動畫
$(selector).animate({params},speed,callback); 用于自定義動畫
- 必需的 params 參數定義形成動畫的 CSS 屬性。
- 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
- 可選的 callback 參數是動畫完成後所執行的函數名稱
- 預設地，所有 HTML 元素都有一個靜态位置，且無法移動。
- 如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！
- 當使用 animate() 時，必須使用 Camel 标記法書寫所有的屬性名
- 使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right
- 也可以定義相對值（該值相對于元素的目前值）。需要在值的前面加上 += 或 -=
- 使用預定義的值:把屬性的動畫值設定為 "show"、"hide" 或 "toggle"
- jQuery 提供針對動畫的隊列功能
5. callBack 回調方法
當動畫 100% 完成後，即調用 Callback 函數。
6. 暫停動畫
$(selector).stop(stopAll,goToEnd); 用于停止動畫或效果，在它們完成之前。
- 可選的 stopAll 參數規定是否應該清除動畫隊列。預設是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
- 可選的 goToEnd 參數規定是否立即完成目前動畫。預設是 false。
- 是以，預設地，stop() 會清除在被選元素上指定的目前動畫。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery 動畫</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/*隐藏和顯示*/
$("#hide").click(function () {
$("#p1").hide();
});
$("#show").click(function () {
$("#p1").show();
});
$("#showHide").click(function () {
$("#p1").toggle("slow");
});
/*-淡入淡出*/
$("#fadeIN").click(function () {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#fadeOut").click(function () {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("#fadeInOut").click(function () {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$("#fadeTo").click(function () {
$("#div1").fadeTo("slow",0.1);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.8);
});
/*滑動*/
$("#flip").click(function () {
$("#panel").slideToggle("slow");
});
/*動畫*/
$("#animate_btn").click(function () {
$("#animate_div").animate({
left:'100px',
opacity:'0.5',
height:'150px',
width:'150px'
},3000
);
});
$("#stop").click(function () {
$("#animate_div").stop();
});
});
</script>
</head>
<body>
<center>
<%--隐藏和顯示--%>
<p id="p1">點選“隐藏”、“顯示”按鈕</p>
<button id="show" type="button">顯示</button>
<button id="hide" type="button">隐藏</button>
<button id="showHide" type="button">顯示\隐藏</button><br/><br/>
<%--淡入淡出--%>
<button id="fadeIN" type="button">淡入</button>
<button id="fadeOut" type="button">淡出</button>
<button id="fadeInOut" type="button">淡入\淡出</button><br/><br/>
<button id="fadeTo" type="button">淡化</button>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<%--滑動--%>
<p id="flip" style="margin: 0px ;padding: 5px;text-align: center;background-color: antiquewhite;
border: 1px red solid ;width: 300px">滑動</p>
<div id="panel" style="margin: 0px ;padding: 5px;text-align: center;background-color: antiquewhite;
border: 1px red solid; height: 120px;width: 300px;display: none">
<p>縱有紅顔，百生千劫</p>
<p>難消君心，萬古情愁</p>
</div>
<%--動畫--%>
<button id="animate_btn" type="button">開始動畫</button>
<button id="stop" type="button">暫停動畫</button>
<div id="animate_div" style="background: antiquewhite;height: 80px;width: 80px;position: absolute"></div>
</center>
</body>
</html>
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)