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ù)名稱。
對(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()
6.jQuery 滑動(dòng)方法
通過 jQuery凉倚,您可以在元素上創(chuàng)建滑動(dòng)效果兼都。
jQuery 擁有以下滑動(dòng)方法:
slideDown()
slideUp()
slideToggle()
7.jQuery動(dòng)畫
jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫。
生成動(dòng)畫的過程中可同時(shí)使用多個(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)用慎王。
把元素往右邊移動(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)畫搂赋。
9.jQuery 動(dòng)畫的問題
許多 jQuery 函數(shù)涉及動(dòng)畫。這些函數(shù)也許會(huì)將speed或duration作為可選參數(shù)益缠。
例子:$("p").hide("slow")
speed或duration參數(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)行: