- 相關(guān)推薦
關(guān)于jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫(huà)
一.系統(tǒng)預(yù)定義的動(dòng)畫(huà)函數(shù)
1.顯示隱藏函數(shù)
show(); //顯示元素(同時(shí)增加寬、高、不透明度)
hide(); //隱藏元素
執(zhí)行hide()隱藏界面元素,相當(dāng)于將css樣式中的display:none.
我們也可以在函數(shù)中加入?yún)?shù),具體如下:
show("slow");
除了slow取值外,還可以設(shè)置為normal,fast,分別代表時(shí)間為600,400,200毫秒
我們也可以加如具體時(shí)間取值。具體如下:
slow(1000);
這樣代表時(shí)間完全顯示出元素的時(shí)間間隔為1000毫秒
2.不透明度函數(shù)
fadeIn();//逐漸顯示元素(只增加不透明度)
fadeOut();//逐漸隱退元素
3.高寬度函數(shù)
slideDown();//逐漸增加元素高度(只增加元素高度)
slideUp();//逐漸縮短元素高度
二.自定義動(dòng)畫(huà)函數(shù)
animate(params,speed,callback);
params:取值為一個(gè)樣式屬性和取值的映射
speed:速度
callback:動(dòng)畫(huà)完成時(shí)的執(zhí)行函數(shù)
其中params的樣式屬性取值可以是多個(gè)屬性,也可以是累增,累減的取值
例子:
復(fù)制代碼 代碼如下:
$(function(){
$(#id1).click(function(){
$(this).animate({left:"+=500px",height:"200px"},3000,function(){
$(this).css("border","5px solid blue")
})
})
})
1.停止元素動(dòng)畫(huà)
stop();
結(jié)束當(dāng)前執(zhí)行的動(dòng)畫(huà),并立即執(zhí)行下面定義的動(dòng)畫(huà)
2.判斷是否在動(dòng)畫(huà)狀態(tài)
is(":animate")
3.其他動(dòng)畫(huà)函數(shù)
toggle(speed,callback);//立即切換元素狀態(tài)(高,寬,不透明度),如果隱藏則切換到顯示,如果顯示則切換的隱藏
sildeToggle(speed,callback);//改變高度方式切換元素狀態(tài)
fadeto(speed,opacity,callback);切換到指定的不透明度值
【jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫(huà)】相關(guān)文章:
關(guān)于三維動(dòng)畫(huà)制作的學(xué)習(xí)心得三篇05-15
國(guó)產(chǎn)動(dòng)畫(huà)的現(xiàn)狀與前景05-09
建筑動(dòng)畫(huà)的制作流程09-05
定格動(dòng)畫(huà)的制作流程是怎樣的?03-09
動(dòng)畫(huà)動(dòng)作分析的基礎(chǔ)知識(shí)05-11
動(dòng)畫(huà)設(shè)計(jì)的12條原則04-14
flash動(dòng)畫(huà)制作說(shuō)課稿(精選11篇)03-06