JQuery入門指南(2):一些常用的特效

$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});

$("#p2").hide(1000);$("#p2").toggle(1000);

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

文法：

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

如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
文法：

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

文法：

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

必需的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。
文法：

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

文法：

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

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

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

文法：

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

jQuery animate() - 操作多個屬性
請注意，產生動畫的過程中可同時使用多個屬性：
執行個體

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

執行個體

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

執行個體

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

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

stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自訂動畫。
文法

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

可選的 stopAll 參數規定是否應該清除動畫隊列。預設是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。預設是 false。


文法

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

不過，有一種名為連結（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。

如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。
下面的例子把 css(), slideUp(), and slideDown() 連結在一起。"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動：

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