jquery02-jQuery效果=隱藏和顯示+切換+淡入淡出+滑動+動畫+回調+鏈

隱藏和顯示

$( selector). hide( speed,callback);  
$( selector). show( speed,callback);  

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。$("p").hide(1000);

 toggle()方法來切換 hide() 和 show() 方法，$("p").toggle();

$( selector).toggle( speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 toggle() 方法完成後所執行的函數名稱。

淡入淡出--jQuery Fading 方法

fadeIn() 用於淡入已隱藏的元素。

$( selector).fadeIn( speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。.

可選的 callback 參數是 fading 完成後所執行的函數名稱。

 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);

fadeOut() 方法用於淡出可見元素。

$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

 fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。

若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。

若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

 fadeTo() 方法容許漸變爲給定的不透明度（值介於 0 與 1 之間）。

$( selector).fadeTo( speed,opacity,callback);

必需的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。

$("#div3").fadeTo("slow",0.7);

滑動

slideDown() 方法用於向下滑動元素。

$(selector).slideDown(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

slideUp() 方法用於向上滑動元素。

$( selector).slideUp( speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

slideToggle() 方法能夠在 slideDown() 與 slideUp() 方法之間進行切換。

若是元素向下滑動，則 slideToggle() 可向上滑動它們。

若是元素向上滑動，則 slideToggle() 可向下滑動它們。

$( selector).slideToggle( speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

動畫 - animate() 方法

jQuery animate() 方法用於建立自定義動畫。

$(selector).animate({params},speed,callback);

必需的 params 參數定義造成動畫的 CSS 屬性。

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

 animate() - 操做多個屬性

請注意，生成動畫的過程當中可同時使用多個屬性：

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

能夠用 animate() 方法來操做全部 CSS 屬性嗎？
是的，幾乎能夠！不過，須要記住一件重要的事情：當使用 animate() 時，必須使用 Camel （駝峯）標記法書寫全部的屬性名，好比，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同時，色彩動畫並不包含在覈心 jQuery 庫中。若是須要生成顏色動畫，您須要從 jquery.com 下載 Color Animations 插件。

animate() - 使用相對值

能夠定義相對值（該值相對於元素的當前值）。須要在值的前面加上 += 或 -=：

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

animate() - 使用預約義的值

您甚至能夠把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"：

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。這意味着若是您在彼此以後編寫多個 animate() 調用，jQuery 會建立包含這些方法調用的"內部"隊列。而後逐一運行這些 animate 調用。

$("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");
});

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

中止動畫

jQuery stop() 方法用於在動畫或效果完成前對它們進行中止，適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

$( selector).stop( stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。

所以，默認地，stop() 會清除在被選元素上指定的當前動畫。$("#panel").stop();

 callback 實例

如下實例在隱藏效果徹底實現後回調函數:

$("button").click(function(){
　　 $("p").hide("slow",function(){
 　　　　 alert("The paragraph is now hidden");
 　   });
});

如下實例沒有回調函數，警告框會在隱藏效果完成前彈出：

沒有 callback(回調)

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

方法連接

有一種名爲連接（chaining）的技術，容許咱們在相同的元素上運行多條 jQuery 命令，一條接着另外一條，把動做/方法連接在一塊兒。

提示： 這樣的話，瀏覽器就沒必要屢次查找相同的元素。

如需連接一個動做，您只需簡單地把該動做追加到以前的動做上。

下面的例子把 css()、slideUp() 和 slideDown() 連接在一塊兒。"p1" 元素首先會變爲紅色，而後向上滑動，再而後向下滑動：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);