jquery效果（二）

標籤：style   blog   color   使用   os   io   cti   ar   

jQuery animate() 方法用於建立自訂動畫。
文法：
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。

$("button").click(function(){$("div").animate({left:‘250px‘});}); 

　　

提示：預設地，所有 HTML 元素都有一個靜態位置，且無法移動。
如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！

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

$("button").click(function(){$("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 外掛程式。

使用相對值
也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：
執行個體

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

　　

jQuery animate() - 使用預定義的值
您甚至可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle"：
執行個體

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

　　

jQuery animate() - 使用隊列功能
預設地，jQuery 提供針對動畫的隊列功能。
這意味著如果您在彼此之後編寫多個 animate() 調用，jQuery 會建立包含這些方法調用的“內部”隊列。然後逐一運行這些 animate 調用
。
執行個體 1
隱藏，如果您希望在彼此之後執行不同的動畫，那麼我們要利用隊列功能：

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

　　

執行個體 2
下面的例子把 <div> 元素移動到右邊，然後增加文本的字型大小：

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

 

jQuery stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自訂動畫。
文法
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。預設是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。預設是 false。
因此，預設地，stop() 會清除在被選元素上指定的當前動畫。

Callback 函數在當前動畫 100% 完成之後執行。

$(selector).hide(speed,callback)

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

　　

jQuery chaining方法連結
允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。
提示：這樣的話，瀏覽器就不必多次尋找相同的元素。
如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。
例子 1
下面的例子把 css(), slideUp(), and slideDown() 連結在一起。"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動：

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