2、動畫
jquery中常用的動畫的方法就是hide()與show().
$(element).hide()這段代碼可以與這相等element.css("display","none")
在hide(time)與show(time)中填入事件,可以慢慢消失跟顯現??梢孕薷脑氐亩鄠€樣式,高度,寬度,不透明度。
另一組方法fadeIn()與fadeOut()這個與hide跟show不同的是,當使用hide或者show的時候會改變網頁的高度,而fadeIn與fadeOut則不會。
還有一組是slideUp,slideDown改變高度。
方法說明:
Hide()/show():同時修改多個樣式屬性:高度、寬度、不透明度。
fadeIn()/fadeout():只修改不透明度。
slideUp()/slideDown():只改變高度。
fadeTo():只改變不透明度。
Toggle():用來替代hide()方法和show()方法,所以會同時修改多個樣式屬性即高度寬度和不透明度。
slideToggle():用來代替slideUp()和slideDown()方法,所以只能改變高度。
Animate():屬于自定義動畫的方法,直接使用animate()方法還能自定義其他的屬性樣式,例如left,marginLeft,scrollTop等。
1)、show(), hide() animate / a1.html
a,作用: 通過同時改變元素的寬度和高度來實現顯示或者隱藏。
b,用法:
show(速度,[callback])
速度: 'slow','normal','fast',也可以用毫秒數
callback: 當整個動畫執行完畢之后,會立即調用這個函數(回調函數)。
2)、slideUp() slideDown() animate / a1.html
a,作用:通過改變元素的高度來實現顯示或者隱藏
b,用法:同show
3)、fadeIn() fadeOut() animate / a2.html
a,作用:通過改變不透明度來實現顯示或者隱藏
b,用法:同show
4)、自定義動畫 animate animate / a3.html
用法:
animate(params,speed,[callback])
params: 是一個javascript對象,描述了動畫完成之后元素的樣式。比如: {'left':'500px','top':'200px'}
speed:速度,單位是毫秒
callback:回調函數,也就是說,當整個動畫執行完畢之后會執行。
5)、動畫隊列問題
a、一組元素上的動畫效果。
a)當在一個animate()方法中應用多個屬性時,動畫是同時發生的。
b)當以鏈式的寫法應用動畫方法時,動畫是按照順序發生的。
b、多組元素上的動畫效果。
a)默認情況下,動畫都是同時發生的。
b)當以回調的形式應用動畫方式時,動畫是按照回調順序發生的。
另外,在動畫方法中,要注意其他非動畫的方法會插隊,例如css()方法,要使這些非動畫的方法也按照順序來執行,需要把這些方法寫在動畫方法的回調函數中。
例子:
$('#id').animate({left:'600px',top:'400px'},3000,function(){
$(this).css('border','2px solid blue');
});
若想要動畫停止,需要在animate()方法前插入stop()方法
如:$("#id").stop().animate()注意stop中的兩個參數。
判斷元素是否在動畫狀態的方法時:
$(element).is(":animated");
3、類數組的操作 array/a1.html
所謂類數組,指的是jQuery對象里面包含的所有的dom對象??梢岳胘Query對象提供的一些方法和屬性來對這些dom對象進行遍歷。
1)屬性
length: 獲得dom對象的個數。
2)方法
a, each(fn(i)):循環遍歷每一個元素,
i表示被迭代的對象的下標
this代表被迭代的dom對象,
$(this)代表被迭代的jquery對象。
b,eq(index):返回index位置處的jquery對象
c,index(obj):返回下標,其中obj可以是dom對象或者jquery對象。
d,get():返回dom對象組成的數組
e,get(index):返回index位置處的dom對象。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。