6 4 jQuery擴充套件

2021-10-09 08:53:57 字數 2023 閱讀 6128

原理:我們只需要以固定的時間間隔(例如,0.1秒),每次dom元素的css樣式修改一點(例如,高寬各增加10%),看起來就像動畫了。

animate()可以實現任意動畫效果,需要傳遞的引數是dom元素最終的css狀態和時間

delay(1000)停頓一秒

$

('.d1').

animate(,

1000).

animate(,

1000

)

$

('.d2').

click

(function()

,1000).

delay

(1000

)//停頓一秒

show / hide直接以無參形式呼叫show()和hide(),會顯示和隱藏dom元素,但是只要傳遞乙個時間引數進去,就變成了動畫。

$

('.d1').

hide

(1000).

delay

(500).

show

(1000);

// 1s逐漸消失,停頓0.5s,1s逐漸出現

toggle()自動判斷當前元素狀態,如果顯示那就讓他隱藏

,如果隱藏那就讓他顯示

$

('.d1').

toggle

(1000).

delay

(500).

toggle

(1000);

//效果同上

以上方法都是去往左上角變小隱藏

也有淡入淡出效果,如下:

fadein / fadeoutfadeln()和fadeout()方法是動畫淡入淡出,也就是通過不斷地設定dom元素的opacity屬性來實現。

$

('.d1').

fadein

(1000).

delay

(500).

fadeout

(1000);

//效果同上

fadetoggle()自動判斷當前元素狀態,如果顯示那就讓他隱藏

,如果隱藏那就讓他顯示

$

('.d1').

fadetoggle

(1000).

delay

(500).

fadetoggle

(1000);

//效果同上

slideup / slidedown在垂直方向逐漸展開或收縮

slidetoggle自動判斷當前元素狀態,如果顯示那就讓他隱藏

,如果隱藏那就讓他顯示

settimeout指定的毫秒數後呼叫函式或計算表示式

settimeout

(function()

,3000);

//3 秒(3000 毫秒)後彈出 "hello"

setinterval按照指定的週期(以毫秒計)來呼叫函式或計算表示式

setinterval

(function()

,3000);

//每三秒(3000 毫秒)輸出乙個 "hello"

jquery擴充套件(

如何寫乙個jquery 之前看了好多網上的例子,講真,不知其所以然,生搬硬套。其實自己還是一臉的懵b,想想還真的有必要仔細研讀一下書籍。言歸正傳,正式巴拉巴拉筆記 擴充套件jquery什麼鬼?三個問號表示當時真的不懂 很簡單的說 既然可以呼叫jq裡的 例如 addclass class fn 等等方...

jQuery擴充套件

jquery有乙個方法特別有用,extend。jquery自身通過該方法對jquery進行擴充套件,在api中使用者也可以根據需要對jquery擴充套件。jquery.extend jquery.fn.extend function i 1,length arguments.length,deep ...

jQuery擴充套件

1.jquery方法的呼叫方式 方法1 選擇器 執行方法 i1 css 方法2 直接執行函式 ajax 方法3 自定義方法 示例 用 extend方法,增加了1個answer 方法。執行效果 方法4.用 fn.extend 擴充套件,擴充套件方法不同,呼叫方式也不同。效果 1 把擴充套件函式寫到.j...