一、 點(diǎn)擊隱藏或顯示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，并隱藏已顯示的元素：
實(shí)例
//點(diǎn)擊隱藏
$("#hide").click(function(){
$("p").hide();
});
//點(diǎn)擊顯示
$("#show").click(function(){
$("p").show();
});
$("button").click(function(){
$("p").toggle();
});
二、淡入淡出元素
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
$(selector).fadeToggle(speed,callback);
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
實(shí)例
//淡入已隱藏的元素
$("button").click(function(){
$("#div1").fadeIn();//無參數(shù)
$("#div2").fadeIn("slow");//慢
$("#div3").fadeIn(3000);//時(shí)間周期
});
//淡出可見的元素
$("button").click(function(){
$("#div1").fadeOut();//無參數(shù)
$("#div2").fadeOut("slow");//慢
$("#div3").fadeOut(3000);//時(shí)間周期
});
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
三、向上向下滑動元素
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。
$(selector).slideToggle(speed,callback);
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
實(shí)例
//向下滑動元素
$("#flip").click(function(){
$("#panel").slideDown();
});
//向上滑動元素。
$("#flip").click(function(){
$("#panel").slideUp();
});
$("#flip").click(function(){
$("#panel").slideToggle();
});
```
# 四、創(chuàng)建自定義動畫
$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
實(shí)例
```
//元素往右邊移動了 250 像素
$("button").click(function(){
$("div").animate({left:'250px'});
});
//生成動畫的過程中可同時(shí)使用多個(gè)屬性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
//也可以定義相對值（該值相對于元素的當(dāng)前值）。需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
//甚至可以把屬性的動畫值設(shè)置為 "show"、"hide" 或 "toggle"
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
// 使用隊(duì)列功能
//這意味著如果您在彼此之后編寫多個(gè) animate() 調(diào)用，jQuery 會創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
```
# 五、停止動畫或效果，適用于所有 jQuery 效果函數(shù)，包括滑動、淡入淡出和自定義動畫
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊(duì)列。默認(rèn)是 false，即僅停止活動的動畫，允許任何排入隊(duì)列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false。
因此，默認(rèn)地，stop() 會清除在被選元素上指定的當(dāng)前動畫。
實(shí)例
```
$("#stop").click(function(){
$("#panel").stop();
});
```
# 六、jQuery Callback 方法，函數(shù)在當(dāng)前動畫 100% 完成之后執(zhí)行
```
//在隱藏效果完全實(shí)現(xiàn)后回調(diào)函數(shù):
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
//沒有回調(diào)函數(shù)，警告框會在隱藏效果完成前彈出
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
```
# 七、jQuery - Chaining，可以把動作/方法鏈接在一起
直到現(xiàn)在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。
不過，有一種名為鏈接（chaining）的技術(shù)，允許我們在相同的元素上運(yùn)行多條 jQuery 命令，一條接著另一條。
提示： 這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個(gè)動作，您只需簡單地把該動作追加到之前的動作上。
實(shí)例
```
//把 css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會變?yōu)榧t色，然后向上滑動，再然后向下滑動
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//當(dāng)進(jìn)行鏈接時(shí)，代碼行會變得很差。不過，jQuery 語法不是很嚴(yán)格；您可以按照希望的格式來寫，包含換行和縮進(jìn)
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
```