jQuery的動畫效果

2021-10-06 06:04:43 字數 1621 閱讀 2113

一、show()方法和hide()方法

1.show()與hide()

show():根據hide()方法記住的display屬性值來顯示元素。

hide() : 將該元素的display樣式改為 「none」,用來隱藏元素

2.引數讓元素動起來:

單純的呼叫show()和hide()相當於css(「display」,「none/block/inline」),不會有任何動畫。如果希望呼叫元素慢慢顯示/消失,則可以為show()/hide()方法指定乙個速度引數.

引數:slow,normal,fast,數值(以毫秒為單位)

$(

"element"

).show(

"slow"

); //元素將緩慢的顯示出來

$("element"

).show(

"normal"

); //元素將預設速度顯示出來

$("element"

).show(

"fast"

); //元素將迅速的顯示出來

$("element"

).hide(

"1000"

); //元素將在1000毫秒(1秒)內慢慢地隱藏

注:對元素使用帶引數的show()和hide()是從:高度,寬度,不透明度 三個屬性同時進行操作的。

二、fadein()方法和fadeout()方法

fadein()/fadeout() 只改變元素的不透明度。

fadeout() 淡出:會在指定的一段時間內降低元素的不透明度,直到元素完全消失(「display:none」)。

fadein() 淡入:與fadeout()完全相反。

fadeto();淡入到

fadetoggle():淡入與淡出

例:

$(

"#panel h5.head"

).toggle(function(

),function())

;

三、slideup()方法和slidedown()方法

slideup()/slidedown()只改變元素的高度。

slidedown()滑入:如果乙個元素的display屬性值為"none",當呼叫slidedown()時,這個元素將由上至下延伸顯示。

slideup() 滑出:與slidedown()完全相反。

slidetoggle():滑入與滑出

例:

$(

"#panel h5.head"

).toggle(function(

),function())

;

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

語法:$(selector).animate(,speed,callback);

params 引數是必須存在的,它定義形成動畫的 css 屬性。

比如speed : 速度引數,可選。

callback : 在動畫完成時執行的函式,可選。

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 引數規定效果的時長。它可...