jQuery 效果- 隱藏和顯示

1.通過 jQuery,可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素:

2.可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。

下面的例子演示了帶有 speed 參數(shù)的 hide() 方法

點擊隱藏會慢慢消失

3.jQuery toggle()

通過 jQuery,您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素,并隱藏已顯示的元素:


4.

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

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

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。


可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。

語法:

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

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。


對于可選的 callback 參數(shù),有以下兩點說明:

1.$(selector)選中的元素的個數(shù)為n個,則callback函數(shù)會執(zhí)行n次;

2.callback函數(shù)名后加括號,會立刻執(zhí)行函數(shù)體,而不是等到顯示/隱藏完成后才執(zhí)行;

3.callback既可以是函數(shù)名,也可以是匿名函數(shù);


5.jQuery 效果 -淡入淡出

jQuery Fading 方法

通過 jQuery,可以實現(xiàn)元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()


按照參數(shù)淡入
按照參數(shù)淡出

6.jQuery 滑動方法

通過 jQuery,您可以在元素上創(chuàng)建滑動效果。

jQuery 擁有以下滑動方法:

slideDown()

slideUp()

slideToggle()


slideDown()
slideUp()
slideToggle()


slideDown()完整

7.jQuery動畫

jQuery animate() 方法用于創(chuàng)建自定義動畫。



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

操作多個屬性


jQuery animate() - 使用隊列功能

默認地,jQuery 提供針對動畫的隊列功能。

這意味著如果您在彼此之后編寫多個 animate() 調(diào)用,jQuery 會創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊列。然后逐一運行這些 animate 調(diào)用。

使用隊列功能

把元素往右邊移動了 100 像素,然后增加文本的字號:

8.jQuery stop() 方法

jQuery stop() 方法用于停止動畫或效果,在它們完成之前。

stop() 方法適用于所有 jQuery 效果函數(shù),包括滑動、淡入淡出和自定義動畫。

語法:

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執(zhí)行。

可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認是 false。

因此,默認地,stop() 會清除在被選元素上指定的當(dāng)前動畫。


停止動畫

9.jQuery 動畫的問題

許多 jQuery 函數(shù)涉及動畫。這些函數(shù)也許會將speedduration作為可選參數(shù)。

例子:$("p").hide("slow")

speedduration參數(shù)可以設(shè)置許多不同的值,比如 "slow", "fast", "normal" 或毫秒。

以下實例在隱藏效果完全實現(xiàn)后回調(diào)函數(shù):

10.jQuery鏈

通過 jQuery,可以把動作/方法鏈接在一起。

Chaining 允許我們在一條語句中運行多個 jQuery 方法(在相同的元素上)。

直到現(xiàn)在,我們都是一次寫一條 jQuery 語句(一條接著另一條)。

不過,有一種名為鏈接(chaining)的技術(shù),允許我們在相同的元素上運行多條 jQuery 命令,一條接著另一條。

提示:這樣的話,瀏覽器就不必多次查找相同的元素。

如需鏈接一個動作,您只需簡單地把該動作追加到之前的動作上。

下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會變?yōu)榧t色,然后向上滑動,再然后向下滑動:


如果需要,我們也可以添加多個方法調(diào)用。

提示:當(dāng)進行鏈接時,代碼行會變得很差。不過,jQuery 語法不是很嚴格;您可以按照希望的格式來寫,包含換行和縮進。

如下書寫也可以很好地運行:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 通過jQuery,您可以選?。ú樵?,query)HTML元素,并對它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 713評論 0 3
  • 警告請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。如果在文檔已完成加載后執(zhí)行 document....
    鹿守心畔光閱讀 2,895評論 3 104
  • 主要記錄在菜鳥上學(xué)習(xí)的內(nèi)容:平時可能會用到但是不太熟悉的內(nèi)容——做記錄之用。 隱藏和顯示效果 可選的 speed ...
    噠噠DaDa閱讀 620評論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,493評論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,262評論 0 1

友情鏈接更多精彩內(nèi)容