2、動(dòng)畫
jquery中常用的動(dòng)畫的方法就是hide()與show().
$(element).hide()這段代碼可以與這相等element.css("display","none")
在hide(time)與show(time)中填入事件,可以慢慢消失跟顯現(xiàn)??梢孕薷脑氐亩鄠€(gè)樣式,高度,寬度,不透明度。
另一組方法fadeIn()與fadeOut()這個(gè)與hide跟show不同的是,當(dāng)使用hide或者show的時(shí)候會改變網(wǎng)頁的高度,而fadeIn與fadeOut則不會。
還有一組是slideUp,slideDown改變高度。
方法說明:
Hide()/show():同時(shí)修改多個(gè)樣式屬性:高度、寬度、不透明度。
fadeIn()/fadeout():只修改不透明度。
slideUp()/slideDown():只改變高度。
fadeTo():只改變不透明度。
Toggle():用來替代hide()方法和show()方法,所以會同時(shí)修改多個(gè)樣式屬性即高度寬度和不透明度。
slideToggle():用來代替slideUp()和slideDown()方法,所以只能改變高度。
Animate():屬于自定義動(dòng)畫的方法,直接使用animate()方法還能自定義其他的屬性樣式,例如left,marginLeft,scrollTop等。
1)、show(), hide() animate / a1.html
a,作用: 通過同時(shí)改變元素的寬度和高度來實(shí)現(xiàn)顯示或者隱藏。
b,用法:
show(速度,[callback])
速度: 'slow','normal','fast',也可以用毫秒數(shù)
callback: 當(dāng)整個(gè)動(dòng)畫執(zhí)行完畢之后,會立即調(diào)用這個(gè)函數(shù)(回調(diào)函數(shù))。
2)、slideUp() slideDown() animate / a1.html
a,作用:通過改變元素的高度來實(shí)現(xiàn)顯示或者隱藏
b,用法:同show
3)、fadeIn() fadeOut() animate / a2.html
a,作用:通過改變不透明度來實(shí)現(xiàn)顯示或者隱藏
b,用法:同show
4)、自定義動(dòng)畫 animate animate / a3.html
用法:
animate(params,speed,[callback])
params: 是一個(gè)javascript對象,描述了動(dòng)畫完成之后元素的樣式。比如: {'left':'500px','top':'200px'}
speed:速度,單位是毫秒
callback:回調(diào)函數(shù),也就是說,當(dāng)整個(gè)動(dòng)畫執(zhí)行完畢之后會執(zhí)行。
5)、動(dòng)畫隊(duì)列問題
a、一組元素上的動(dòng)畫效果。
a)當(dāng)在一個(gè)animate()方法中應(yīng)用多個(gè)屬性時(shí),動(dòng)畫是同時(shí)發(fā)生的。
b)當(dāng)以鏈?zhǔn)降膶懛☉?yīng)用動(dòng)畫方法時(shí),動(dòng)畫是按照順序發(fā)生的。
b、多組元素上的動(dòng)畫效果。
a)默認(rèn)情況下,動(dòng)畫都是同時(shí)發(fā)生的。
b)當(dāng)以回調(diào)的形式應(yīng)用動(dòng)畫方式時(shí),動(dòng)畫是按照回調(diào)順序發(fā)生的。
另外,在動(dòng)畫方法中,要注意其他非動(dòng)畫的方法會插隊(duì),例如css()方法,要使這些非動(dòng)畫的方法也按照順序來執(zhí)行,需要把這些方法寫在動(dòng)畫方法的回調(diào)函數(shù)中。
例子:
$('#id').animate({left:'600px',top:'400px'},3000,function(){
$(this).css('border','2px solid blue');
});
若想要?jiǎng)赢嬐V?,需要在animate()方法前插入stop()方法
如:$("#id").stop().animate()注意stop中的兩個(gè)參數(shù)。
判斷元素是否在動(dòng)畫狀態(tài)的方法時(shí):
$(element).is(":animated");
3、類數(shù)組的操作 array/a1.html
所謂類數(shù)組,指的是jQuery對象里面包含的所有的dom對象??梢岳胘Query對象提供的一些方法和屬性來對這些dom對象進(jìn)行遍歷。
1)屬性
length: 獲得dom對象的個(gè)數(shù)。
2)方法
a, each(fn(i)):循環(huán)遍歷每一個(gè)元素,
i表示被迭代的對象的下標(biāo)
this代表被迭代的dom對象,
$(this)代表被迭代的jquery對象。
b,eq(index):返回index位置處的jquery對象
c,index(obj):返回下標(biāo),其中obj可以是dom對象或者jquery對象。
d,get():返回dom對象組成的數(shù)組
e,get(index):返回index位置處的dom對象。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括樂安網(wǎng)站建設(shè)、樂安網(wǎng)站制作、樂安網(wǎng)頁制作以及樂安網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,樂安網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到樂安省份的部分城市,未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!