jQuery 動(dòng)態(tài)酷效果實(shí)現(xiàn)總結(jié)
更新時(shí)間:2009年12月27日 03:01:25 作者:
jQuery是一個(gè)優(yōu)秀的JavaScript框架,可以很好的解決不同瀏覽器兼容的問(wèn)題,尤其是在ASP.NET MVC下,它的作用更加的凸顯。
jQuery在制作動(dòng)態(tài)酷效果的時(shí)候有很強(qiáng)的優(yōu)勢(shì),以下是筆者總結(jié)的一些最常用到的方法。
1.修改內(nèi)聯(lián)CSS
jQyery提供.css()方法來(lái)供我們獲取或修改內(nèi)聯(lián)的css
.css()方法能夠接收的參數(shù)由兩種,一種是為它單獨(dú)傳遞一個(gè)單獨(dú)的樣式屬性和值,另一種是為它傳遞一個(gè)由“屬性-值”對(duì)構(gòu)成的映射:
.css('property','value');
.css({'property1':'value1','property-2':'value2'});
一般來(lái)說(shuō),數(shù)字值不需要加引號(hào),而字符串值需要加引號(hào)。但是,當(dāng)使用映射表示法時(shí),如果屬性名使用駝峰大小寫(xiě)形式的DOM表示法,則可以省略引號(hào)。
2.基本的隱藏和顯示,不帶動(dòng)畫(huà)效果
.hide()
.show()
這兩個(gè)方法的作用就是立即隱藏或顯示匹配的元素集合。
3.指定顯示速度的隱藏和顯示
在.hide()和.show()方法的基礎(chǔ)上,可以制定隱藏或顯示的速度。它的表示方法為:.hide('speed')或.show('speed')。speed的值可以為:
slow、normal、fast;slow為0.6秒;normal為0.4秒;fast為0.2秒
數(shù)值表示的毫秒數(shù)值
4.淡入淡出效果
.fadein() 為匹配元素指定淡入效果
.fadeout() 為匹配元素指定淡出效果
使用.fadein()或.fadeout()同樣可以制定speed值,如:slow、normal、fast、毫秒數(shù)
淡入淡出的實(shí)現(xiàn)方式其實(shí)是增加或減少匹配元素的不透明度來(lái)實(shí)現(xiàn)的。
5.制作動(dòng)畫(huà)效果
jQuery提供了一個(gè)強(qiáng)大的.animate()方法,通過(guò)該方法可以創(chuàng)建包含多重效果的自定義動(dòng)畫(huà)。.animate()方法接受以下四個(gè)參數(shù):
一個(gè)包含樣式屬性及值的映射。
可選的速度參數(shù),默認(rèn)為normal。
可選的緩動(dòng)類(lèi)型
可選的回調(diào)參數(shù)。
6.使用.animate()制作動(dòng)畫(huà)的時(shí)候應(yīng)當(dāng)考慮的問(wèn)題
css對(duì)我們要改變的元素所施加的限制
例如,在元素的css定位沒(méi)有設(shè)置成relative或absolute的情況下,調(diào)整left屬性對(duì)于匹配的元素毫無(wú)作用。所有塊級(jí)元素默認(rèn)的css定位屬性都是static,這個(gè)值精切地表明:在改變?cè)氐亩ㄎ粚傩灾霸噲D移動(dòng)它們,它們只會(huì)保持靜止不動(dòng)。
并發(fā)與排隊(duì)效果
jQuery中無(wú)論是處理一組還是多組元素,默認(rèn)都是同時(shí)發(fā)生的,因此,并發(fā)問(wèn)題就成為了我們值得考慮的一個(gè)問(wèn)題。概括起來(lái)有以下兩點(diǎn):
如果是處理一組元素,可以根據(jù)代碼的書(shū)序進(jìn)行控制;
如果是處理多組元素,則可以通過(guò)回調(diào)函數(shù)進(jìn)行控制;
1.修改內(nèi)聯(lián)CSS
jQyery提供.css()方法來(lái)供我們獲取或修改內(nèi)聯(lián)的css
.css()方法能夠接收的參數(shù)由兩種,一種是為它單獨(dú)傳遞一個(gè)單獨(dú)的樣式屬性和值,另一種是為它傳遞一個(gè)由“屬性-值”對(duì)構(gòu)成的映射:
.css('property','value');
.css({'property1':'value1','property-2':'value2'});
一般來(lái)說(shuō),數(shù)字值不需要加引號(hào),而字符串值需要加引號(hào)。但是,當(dāng)使用映射表示法時(shí),如果屬性名使用駝峰大小寫(xiě)形式的DOM表示法,則可以省略引號(hào)。
2.基本的隱藏和顯示,不帶動(dòng)畫(huà)效果
.hide()
.show()
這兩個(gè)方法的作用就是立即隱藏或顯示匹配的元素集合。
3.指定顯示速度的隱藏和顯示
在.hide()和.show()方法的基礎(chǔ)上,可以制定隱藏或顯示的速度。它的表示方法為:.hide('speed')或.show('speed')。speed的值可以為:
slow、normal、fast;slow為0.6秒;normal為0.4秒;fast為0.2秒
數(shù)值表示的毫秒數(shù)值
4.淡入淡出效果
.fadein() 為匹配元素指定淡入效果
.fadeout() 為匹配元素指定淡出效果
使用.fadein()或.fadeout()同樣可以制定speed值,如:slow、normal、fast、毫秒數(shù)
淡入淡出的實(shí)現(xiàn)方式其實(shí)是增加或減少匹配元素的不透明度來(lái)實(shí)現(xiàn)的。
5.制作動(dòng)畫(huà)效果
jQuery提供了一個(gè)強(qiáng)大的.animate()方法,通過(guò)該方法可以創(chuàng)建包含多重效果的自定義動(dòng)畫(huà)。.animate()方法接受以下四個(gè)參數(shù):
一個(gè)包含樣式屬性及值的映射。
可選的速度參數(shù),默認(rèn)為normal。
可選的緩動(dòng)類(lèi)型
可選的回調(diào)參數(shù)。
6.使用.animate()制作動(dòng)畫(huà)的時(shí)候應(yīng)當(dāng)考慮的問(wèn)題
css對(duì)我們要改變的元素所施加的限制
例如,在元素的css定位沒(méi)有設(shè)置成relative或absolute的情況下,調(diào)整left屬性對(duì)于匹配的元素毫無(wú)作用。所有塊級(jí)元素默認(rèn)的css定位屬性都是static,這個(gè)值精切地表明:在改變?cè)氐亩ㄎ粚傩灾霸噲D移動(dòng)它們,它們只會(huì)保持靜止不動(dòng)。
并發(fā)與排隊(duì)效果
jQuery中無(wú)論是處理一組還是多組元素,默認(rèn)都是同時(shí)發(fā)生的,因此,并發(fā)問(wèn)題就成為了我們值得考慮的一個(gè)問(wèn)題。概括起來(lái)有以下兩點(diǎn):
如果是處理一組元素,可以根據(jù)代碼的書(shū)序進(jìn)行控制;
如果是處理多組元素,則可以通過(guò)回調(diào)函數(shù)進(jìn)行控制;
相關(guān)文章

jquery和js實(shí)現(xiàn)對(duì)div的隱藏和顯示方法
jquery和js分別可以實(shí)現(xiàn)對(duì)div的隱藏和顯示,方法也不一樣,jquery的show、show;js的hidden、visible
2014-09-09 
jQuery中innerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中innerWidth()方法用法,實(shí)例分析了innerWidth()方法的功能、定義及獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾鹊氖褂眉记?需要的朋友可以參考下
2015-01-01 
jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果
這篇文章主要介紹了jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
2016-08-08 
jquery+ajax+C#實(shí)現(xiàn)無(wú)刷新操作數(shù)據(jù)庫(kù)數(shù)據(jù)的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery+ajax+C#實(shí)現(xiàn)無(wú)刷新操作數(shù)據(jù)庫(kù)數(shù)據(jù)的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
2014-02-02 
jQuery ajax全局函數(shù)處理session過(guò)期后的ajax跳轉(zhuǎn)問(wèn)題
這篇文章主要介紹了基于jQuery的全局ajax函數(shù)處理session過(guò)期后的ajax操作的相關(guān)資料,需要的朋友可以參考下
2016-06-06 
jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2020-02-02