jQuery實現動畫效果

2021-09-25 15:27:40 字數 3268 閱讀 7960

1.隱藏

$obj.hide()

$obj.hide( [duration ],[complete ])

如果沒有提供引數,被匹配的元素將不帶動畫地立即隱藏。這大致地等同於 .css(「display」, 「none」 )

2.顯示

$obj.show()

$obj.show( [duration ],[complete ])

用法與hide類似

3.隱藏與顯示

$obj.toggle( [duration ],[ complete ])

$obj.toggle( display )

display:

型別:boolean

使用true顯示元素,使用false隱藏元素。

4.淡入

$obj.fadein( [duration ],[complete ])

通過把匹配的元素漸顯為不透明,來顯示匹配的元素。該方法變動了匹配的元素的不透明度。它近似於.fadeto()方法,但是那個方法沒有取 消隱藏元素,並可以指定最終的不透明程度。

5.淡出

$obj.fadeout([duration ],[complete ])

方法變動了匹配的元素的不透明度。一旦不透明度到達0,樣式屬性display會被設定為none,因此元素不再影響網頁的布局。

6. 淡入到

$obj.fadeto(duration, opacity,[complete])

調整匹配的元素的不透明度。opacity是乙個0到1之間的數字,表示目標不透明度。

7. 淡入與淡出

$obj.fadetoggle( [duration],[complete])

通過變動匹配的元素的不透明度,來顯示或隱藏匹配的元素。

8.滑下

$obj.slidedown([duration],[complete])

用滑移動作顯示匹配的元素

9.滑上

$obj.slideup([duration],[complete])

用乙個滑移動作隱藏匹配的元素。

10.滑上與滑下

$obj.slidetoggle([duration],[complete])

用乙個滑移動作顯示或者隱藏匹配的元素。

11.自定義效果

animate()

animate(properties,[duration ],[complete])

properties:乙個css屬性和值的物件,動畫將根據這組物件移動。

1. 所有變動的屬性必須變動到乙個單一數字值 (width,height,left)

2. 除了樣式屬性,有些非樣式屬性,比如說scrolltopscrollleft

以及自定義屬性,也可以變動。

3. 如果乙個值的前面加了+=或者-=這些字元,則目標值會根據屬性的

當前值累加或連減給定的數字計算出來。

例項:

lang

="en"

>

>

charset

="utf-8"

>

>

38title

>

>

divstyle

>

src=

"./js/jquery-3.4.1.min.js"

>

script

>

>$(

function()

);$(

'.show').

click

(function()

);$(

'.toggle').

click

(function()

);//淡入與淡出$(

'.hide').

click

(function()

);$(

'.show').

click

(function()

);$(

'.toggle').

click

(function()

);//滑上與滑下$(

'.hide').

click

(function()

);$(

'.show').

click

(function()

);$(

'.toggle').

click

(function()

);//自定義動畫$(

'.own').

click

(function()

,3000);

});}

);script

>

head

>

>

class

="hide"

>

隱藏button

>

class

="show"

>

展示button

>

class

="toggle"

>

切換button

>

class

="own"

>

自定義動畫button

>

>

hellodiv

>

body

>

html

>

動畫效果:

1.隱藏與顯示

2.淡入與淡出

3.滑上與滑下

4.自定義動畫

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