jQuery 效果- 隱藏和顯示

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

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

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

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

點(diǎn)擊隱藏會(huì)慢慢消失

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ù)名稱。


對(duì)于可選的 callback 參數(shù)苹丸,有以下兩點(diǎn)說明:

1.$(selector)選中的元素的個(gè)數(shù)為n個(gè)愤惰,則callback函數(shù)會(huì)執(zhí)行n次苇经;

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

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


5.jQuery 效果 -淡入淡出

jQuery Fading 方法

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

jQuery 擁有下面四種 fade 方法:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()


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

6.jQuery 滑動(dòng)方法

通過 jQuery凉倚,您可以在元素上創(chuàng)建滑動(dòng)效果兼都。

jQuery 擁有以下滑動(dòng)方法:

slideDown()

slideUp()

slideToggle()


slideDown()
slideUp()
slideToggle()


slideDown()完整

7.jQuery動(dòng)畫

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



生成動(dòng)畫的過程中可同時(shí)使用多個(gè)屬性:

操作多個(gè)屬性


jQuery animate() - 使用隊(duì)列功能

默認(rèn)地稽寒,jQuery 提供針對(duì)動(dòng)畫的隊(duì)列功能扮碧。

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

使用隊(duì)列功能

把元素往右邊移動(dòng)了 100 像素,然后增加文本的字號(hào):

8.jQuery stop() 方法

jQuery stop() 方法用于停止動(dòng)畫或效果宏侍,在它們完成之前赖淤。

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

語法:

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

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

可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫褂始。默認(rèn)是 false诸典。

因此,默認(rèn)地崎苗,stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫搂赋。


停止動(dòng)畫

9.jQuery 動(dòng)畫的問題

許多 jQuery 函數(shù)涉及動(dòng)畫。這些函數(shù)也許會(huì)將speedduration作為可選參數(shù)益缠。

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

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

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

10.jQuery鏈

通過 jQuery幅慌,可以把動(dòng)作/方法鏈接在一起宋欺。

Chaining 允許我們?cè)谝粭l語句中運(yùn)行多個(gè) jQuery 方法(在相同的元素上)。

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

不過酸休,有一種名為鏈接(chaining)的技術(shù),允許我們?cè)谙嗤脑厣线\(yùn)行多條 jQuery 命令祷杈,一條接著另一條斑司。

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

如需鏈接一個(gè)動(dòng)作宿刮,您只需簡(jiǎn)單地把該動(dòng)作追加到之前的動(dòng)作上。

下面的例子把 css()私蕾、slideUp() 和 slideDown() 鏈接在一起僵缺。"p1" 元素首先會(huì)變?yōu)榧t色,然后向上滑動(dòng)踩叭,再然后向下滑動(dòng):


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

提示:當(dāng)進(jìn)行鏈接時(shí)容贝,代碼行會(huì)變得很差自脯。不過,jQuery 語法不是很嚴(yán)格斤富;您可以按照希望的格式來寫冤今,包含換行和縮進(jìn)。

如下書寫也可以很好地運(yùn)行:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末茂缚,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子屋谭,更是在濱河造成了極大的恐慌脚囊,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桐磁,死亡現(xiàn)場(chǎng)離奇詭異悔耘,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)我擂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門衬以,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人校摩,你說我怎么就攤上這事看峻。” “怎么了衙吩?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵互妓,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng)冯勉,這世上最難降的妖魔是什么澈蚌? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮灼狰,結(jié)果婚禮上宛瞄,老公的妹妹穿的比我還像新娘。我一直安慰自己交胚,他們只是感情好份汗,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著承绸,像睡著了一般裸影。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上军熏,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天轩猩,我揣著相機(jī)與錄音,去河邊找鬼荡澎。 笑死均践,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的摩幔。 我是一名探鬼主播彤委,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼或衡!你這毒婦竟也來了焦影?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤封断,失蹤者是張志新(化名)和其女友劉穎斯辰,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坡疼,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡彬呻,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了柄瑰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闸氮。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖教沾,靈堂內(nèi)的尸體忽然破棺而出蒲跨,到底是詐尸還是另有隱情,我是刑警寧澤授翻,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布财骨,位于F島的核電站镐作,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏隆箩。R本人自食惡果不足惜该贾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望捌臊。 院中可真熱鬧杨蛋,春花似錦、人聲如沸理澎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽糠爬。三九已至寇荧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間执隧,已是汗流浹背揩抡。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留镀琉,地道東北人峦嗤。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像屋摔,于是被迫代替她去往敵國和親烁设。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 通過jQuery钓试,您可以選茸昂凇(查詢,query)HTML元素弓熏,并對(duì)它們執(zhí)行“操作”(actions)恋谭。 jQuer...
    枇杷樹8824閱讀 656評(píng)論 0 3
  • 警告請(qǐng)使用 document.write() 僅僅向文檔輸出寫內(nèi)容。如果在文檔已完成加載后執(zhí)行 document....
    hx永恒之戀閱讀 2,849評(píng)論 3 104
  • 主要記錄在菜鳥上學(xué)習(xí)的內(nèi)容:平時(shí)可能會(huì)用到但是不太熟悉的內(nèi)容——做記錄之用硝烂。 隱藏和顯示效果 可選的 speed ...
    噠噠DaDa閱讀 561評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性铜幽。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式滞谢。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,171評(píng)論 0 1