jQuery hide() 和 show()

通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素
語法:
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有 speed 參數(shù)的 hide() 方法：
實(shí)例
$("button").click(function(){
$("p").hide(1000);
});

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，并隱藏已顯示的元素：
實(shí)例

$("button").click(function(){
  $("p").toggle();
}); 

語法:
$(selector).toggle(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。
對于可選的 callback 參數(shù)，有以下兩點(diǎn)說明：
1.$(selector)選中的元素的個(gè)數(shù)為n個(gè)，則callback函數(shù)會(huì)執(zhí)行n次；
2.callback函數(shù)名后加括號，會(huì)立刻執(zhí)行函數(shù)體，而不是等到顯示/隱藏完成后才執(zhí)行；
3.callback既可以是函數(shù)名，也可以是匿名函數(shù)；

jQuery 效果 - 淡入淡出

通過 jQuery，您可以實(shí)現(xiàn)元素的淡入淡出效果。
jQuery Fading 方法
通過 jQuery，您可以實(shí)現(xiàn)元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隱藏的元素。
語法:
$(selector).fadeIn(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。.
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeIn() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可見元素。
語法:
$(selector).fadeOut(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeOut() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
如果元素已淡出，則 fadeToggle() 會(huì)向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會(huì)向元素添加淡出效果。
語法:
$(selector).fadeToggle(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeToggle() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。
語法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeTo() 方法：
實(shí)例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});

jQuery 效果 - 滑動(dòng)

jQuery 滑動(dòng)方法可使元素上下滑動(dòng)。
jQuery 滑動(dòng)方法
通過 jQuery，您可以在元素上創(chuàng)建滑動(dòng)效果。
jQuery 擁有以下滑動(dòng)方法：
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑動(dòng)元素。
語法:
$(selector).slideDown(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideDown() 方法：
實(shí)例

$("#flip").click(function(){
  $("#panel").slideDown();
}); 

jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑動(dòng)元素。
語法:
$(selector).slideUp(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideUp() 方法：
實(shí)例

$("#flip").click(function(){
  $("#panel").slideUp();
}); 

jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。
如果元素向下滑動(dòng)，則 slideToggle() 可向上滑動(dòng)它們。
如果元素向上滑動(dòng)，則 slideToggle() 可向下滑動(dòng)它們。
$(selector).slideToggle(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了 slideToggle() 方法：
實(shí)例

$("#flip").click(function(){
  $("#panel").slideToggle();
}); 

jQuery 效果- 動(dòng)畫

jQuery 動(dòng)畫 - animate() 方法
jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫。
語法：
$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示 animate() 方法的簡單應(yīng)用。它把 <div> 元素往右邊移動(dòng)了 250 像素：
實(shí)例
$("button").click(function(){
$("div").animate({left:'250px'});
});
默認(rèn)情況下，所有 HTML 元素都有一個(gè)靜態(tài)位置，且無法移動(dòng)。
如需對位置進(jìn)行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！

jQuery animate() - 操作多個(gè)屬性

請注意，生成動(dòng)畫的過程中可同時(shí)使用多個(gè)屬性：
實(shí)例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當(dāng)使用 animate() 時(shí)，必須使用 Camel 標(biāo)記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時(shí)，色彩動(dòng)畫并不包含在核心 jQuery 庫中。
如果需要生成顏色動(dòng)畫，您需要從 jquery.com 下載 顏色動(dòng)畫 插件。

jQuery animate() - 使用隊(duì)列功能

默認(rèn)地，jQuery 提供針對動(dòng)畫的隊(duì)列功能。
這意味著如果您在彼此之后編寫多個(gè) animate() 調(diào)用，jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用。

jQuery 停止動(dòng)畫

jQuery stop() 方法

jQuery stop() 方法用于停止動(dòng)畫或效果，在它們完成之前。
stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。
語法:
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false。
因此，默認(rèn)地，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫。
下面的例子演示 stop() 方法，不帶參數(shù)：
實(shí)例

$("#stop").click(function(){
  $("#panel").stop();
});

jQuery Callback 方法

Callback 函數(shù)在當(dāng)前動(dòng)畫 100% 完成之后執(zhí)行。

jQuery 動(dòng)畫的問題

許多 jQuery 函數(shù)涉及動(dòng)畫。這些函數(shù)也許會(huì)將 speed 或 duration 作為可選參數(shù)。
例子：$("p").hide("slow")
speed 或 duration 參數(shù)可以設(shè)置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。
實(shí)例
以下實(shí)例在隱藏效果完全實(shí)現(xiàn)后回調(diào)函數(shù):
使用 callback 實(shí)例
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落現(xiàn)在被隱藏了");
});
});
以下實(shí)例沒有回調(diào)函數(shù)，警告框會(huì)在隱藏效果完成前彈出：
沒有 callback(回調(diào))
$("button").click(function(){
$("p").hide(1000);
alert("段落現(xiàn)在被隱藏了");
});

jQuery - 鏈(Chaining)

通過 jQuery，可以把動(dòng)作/方法鏈接在一起。
Chaining 允許我們在一條語句中運(yùn)行多個(gè) jQuery 方法（在相同的元素上）。

jQuery 方法鏈接

直到現(xiàn)在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。
不過，有一種名為鏈接（chaining）的技術(shù)，允許我們在相同的元素上運(yùn)行多條 jQuery 命令，一條接著另一條。
提示： 這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個(gè)動(dòng)作，您只需簡單地把該動(dòng)作追加到之前的動(dòng)作上。
下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會(huì)變?yōu)榧t色，然后向上滑動(dòng)，再然后向下滑動(dòng)：
實(shí)例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);