jQuery自學筆記(三) jQuery動畫效果

2022-07-31 21:57:12 字數 3015 閱讀 7803

jquery隱藏和顯示:

使用 hide( ) 和 show( ) 方法來隱藏和顯示 html 元素:

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

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

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

乙個關於呼叫callback函式的例項:

$("p").hide(1000,function());

使用 toggle() 方法來切換 hide( ) 和 show( ) 方法,顯示被隱藏的元素,並隱藏已顯示的元素:

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

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是 toggle() 方法完成後所執行的函式名稱。

jquery 淡入淡出效果:

jquery fadein( ) 用於淡入已隱藏的元素。

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

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是 fading 完成後所執行的函式名稱。

jquery fadeout() 方法用於淡出可見元素。

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

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是 fading 完成後所執行的函式名稱。

jquery fadetoggle() 方法可以在 fadein() 與 fadeout() 方法之間進行切換。

如果元素已淡出,則 fadetoggle() 會向元素新增淡入效果,如果元素已淡入,則 fadetoggle() 會向元素新增淡出效果。

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

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是 fading 完成後所執行的函式名稱。

jquery fadeto() 方法允許漸變為給定的不透明度(值介於 0 與 1 之間)。

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

必需的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,fadeto() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度(值介於 0 與 1 之間),可選的 callback 引數是該函式完成後所執行的函式名稱。

jquery 滑動:

jquery slidedown() 方法用於向下滑動元素。

語法:

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

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是滑動完成後所執行的函式名稱。

jquery slideup() 方法用於向上滑動元素。

語法:

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

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是滑動完成後所執行的函式名稱。

jquery slidetoggle() 方法可以在 slidedown() 與 slideup() 方法之間進行切換。

如果元素向下滑動,則 slidetoggle() 可向上滑動它們,如果元素向上滑動,則 slidetoggle() 可向下滑動它們。

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

可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是滑動完成後所執行的函式名稱。

jquery 動畫:

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

語法:

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

必需的 params 引數定義形成動畫的 css 屬性,可選的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒,可選的 callback 引數是動畫完成後所執行的函式名稱。

預設地,所有 html 元素都有乙個靜態位置,且無法移動,如需對位置進行操作,要記得首先把元素的 css position 屬性設定為 relative、fixed 或 absolute!

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

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

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

jquery stop() 方法用於停止動畫或效果,在它們完成之前,stop() 方法適用於所有 jquery 效果函式,包括滑動、淡入淡出和自定義動畫。

語法:

$(selector).stop(stopall,gotoend);

可選的 stopall 引數規定是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。可選的 gotoend 引數規定是否立即完成當前動畫。預設是 false。因此,預設地,stop() 會清除在被選元素上指定的當前動畫。

jQuery 自學筆記 3

this hide 演示 jquery hide 函式,隱藏當前的 html 元素。test hide 演示 jquery hide 函式,隱藏 id test 的元素。p hide 演示 jquery hide 函式,隱藏所有 元素。test hide 演示 jquery hide 函式,隱藏所有...

jQuery自學筆記(31 40

34 城市選擇案例 35 清空節點empty 與移除節點remove 36 刪除 37 38 clone 與val 39 動態資料的新增與刪除 40 jquery操作屬性 p1 span1 標題位址 說明操作 var linew 我是新建立的li標籤 var li3 li3 var li32 li3...

MTALAB自學筆記(三)

常見命令與符號 for end 迴圈次數已定 while end 迴圈次數由條件決定 while迴圈的三要素 1.迴圈前設定迴圈啟動值 2.有中止迴圈條件 3.迴圈體內有迴圈計數器,每次迴圈都會接近迴圈中止值 if else end 適合單分之,多分支 switch case otherwise e...