玩轉Jquery中的動畫效果 animate方法

2021-09-27 08:20:31 字數 1878 閱讀 4122

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

語法:

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

必需的 params 引數定義形成動畫的 css 屬性。

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。

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

下面的例子演示 animate() 方法的簡單應用;它把 元素移動到左邊,直到 left 屬性等於 250 畫素為止:

例項

$("button").

click(

function());

}); 

如需對位置進行操作,要記得首先把元素的 css position 屬性設定為 relative、fixed 或 absolute!

jquery animate() - 操作多個屬性

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

例項

$("button").click(function());

}); 

是的,幾乎可以!不過,需要記住一件重要的事情:當使用 animate() 時,必須使用 camel 標記法書寫所有的屬性名,比如,必須使用 paddingleft 而不是 padding-left,使用 marginright 而不是 margin-right,等等。

同時,色彩動畫並不包含在核心 jquery 庫中。

jquery animate() - 使用相對值

也可以定義相對值(該值相對於元素的當前值)。需要在值的前面加上 = 或 -=:

例項

$("button").click(function());

});jquery animate() - 使用預定義的值

您甚至可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle":

例項

$("button").click(function());

});jquery animate() - 使用佇列功能

預設地,jquery 提供針對動畫的佇列功能。這意味著如果您在彼此之後編寫多個 animate() 呼叫,jquery 會建立包含這些方法呼叫的「內部」佇列。然後逐一執行這些 animate 呼叫。

例項 1

隱藏,如果您希望在彼此之後執行不同的動畫,那麼我們要利用佇列功能:

$("button").click(function(),"slow");

div.

animate(,"slow");

div.

animate(,"slow");

div.

animate(,"slow");

});例項 2

下面的例子把 元素移動到右邊,然後增加文字的字型大小:

$("button").click(function(),"slow");

div.

animate(,"slow");

});最後來乙個完整的例子

開始動畫

預設情況下,所有 html 元素的位置都是靜態的,並且無法移動。如需對位置進行操作,記得首先把元素的 css position 屬性設定為 relative、fixed 或 absolute。

jquery 動畫效果

首先,在做jquery 動畫效果之前,必須先知道jquery動畫效果的實現順序。jquery中,會把所有的動畫效果 如hide,show等 放入乙個佇列中 預設為 fx 然後依照先進先出的原則執行佇列中的動畫效果。其他的非動畫效果,都不會放入佇列中。並且jquery 會優先執行這些非動畫效果,然後再...

JQuery動畫效果

show 顯示隱藏的匹配元素 hide 隱藏顯示的元素 slideup 滑走 元素不能復原 slidetoggle 滑走 元素可以復原 感覺今天寫的並沒有什麼卵用 因為這是動的啊!但是看在iphone更新的情況下 就寫一下吧 fadein 通過不透明度的變化來實現所有匹配元素的淡入效果注意 不會 影...

jQuery 效果 動畫

jquery animate 方法允許您建立自定義的動畫。開始動畫 jquery jquery animate 方法用於建立自定義動畫。selector animate speed,callback 必需的 params 引數定義形成動畫的 css 屬性。可選的 speed 引數規定效果的時長。它可...