快捷導(dǎo)航

鋒利的jQuery 要點(diǎn)歸納（三） jQuery中的事件和動(dòng)畫（下：動(dòng)畫篇）

更新時(shí)間：2010年03月24日 17:07:20 作者：

《鋒利的jQuery》要點(diǎn)歸納（三） jQuery中的事件和動(dòng)畫（下：動(dòng)畫篇）

二、動(dòng)畫
1 show()方法和hide()方法

 
$("selector").show() 
從display:none還原元素默認(rèn)或已設(shè)置的display屬性 
$("selector").hide() 
設(shè)置元素的display樣式為none，等于$("selector").css("display","none") 

（注：傳入?yún)?shù)后，.show()和.hide()方法同時(shí)動(dòng)畫改變?cè)氐膚idth,height和透明屬性；傳入?yún)?shù)控制顯隱速度，單位毫秒，如.show(600)，也可傳入fast,normal,slow，fast為200毫秒，normal為400毫秒，slow為600毫秒）
2 fadeIn()方法和fadeOut()方法

復(fù)制代碼代碼如下:

 
$("selector").fadeIn() 
控制透明度在指定時(shí)間內(nèi)從display:none提高至完全顯示 
$("selector").fadeOut() 
控制透明度在指定時(shí)間內(nèi)降低至display:none; 

3 slideUp()方法和slideDown()方法

復(fù)制代碼代碼如下:

 
$("selector").slideUp() 
控制元素高度在指定時(shí)間內(nèi)從下到上縮短至display:none; 
$("selector").slideDown() 
控制元素高度在指定時(shí)間內(nèi)從display:none延伸至完整高度 

4 自定義動(dòng)畫方法animate()

復(fù)制代碼代碼如下:

 
$("selector").animate(params,speed,callback); 
params:一個(gè)包含樣式屬性及值的映射，比如{property1:"value1",property2:"value2",...} 
speed:速度參數(shù)，可選 
callback:在動(dòng)畫完成時(shí)執(zhí)行的參數(shù)（即回調(diào)函數(shù)），可選 

常見的動(dòng)畫例子

復(fù)制代碼代碼如下:

 
<script> 
//自定義動(dòng)畫的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"500px"},3000); //selector在3秒內(nèi)向右移動(dòng)500px 
}); 
}) 
</script> 

復(fù)制代碼代碼如下:

 
<script> 
//累加、累減動(dòng)畫的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"+=500px"},3000); //連續(xù)觸發(fā)click事件時(shí)，在當(dāng)前位置累加500px 
}); 
}) 
</script> 
<script> 
//多重動(dòng)畫的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向運(yùn)動(dòng)，同時(shí)增加高度 
}); 
}) 
</script> 
<script> 
//按順序執(zhí)行多個(gè)動(dòng)畫的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //動(dòng)畫隊(duì)列 
}); 
}) 
</script> 

5 動(dòng)畫回調(diào)函數(shù)
因css()方法不會(huì)加入動(dòng)畫隊(duì)列中，則會(huì)馬上執(zhí)行。如若要在動(dòng)畫最后改變selector的css，需要利用回調(diào)函數(shù)
例：

復(fù)制代碼代碼如下:

 
<script> 
$("selector").click(function(){ 
$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){ 
$(this).css("property3","value3"); //css()方法利用回調(diào)函數(shù)加入動(dòng)畫隊(duì)列 
}); 
}) 
</script> 

（注：動(dòng)畫回調(diào)函數(shù)適用于jQuery所有的動(dòng)畫效果方法）
6 停止動(dòng)畫和判斷是否處于動(dòng)畫狀態(tài)
$("selector").stop()
結(jié)束當(dāng)前動(dòng)畫，如隊(duì)列中存在下一個(gè)動(dòng)畫則立即執(zhí)行下一個(gè)動(dòng)畫，格式$("selector").stop([clearQueue][,gotoEnd])
切換動(dòng)畫的例子：

復(fù)制代碼代碼如下:

 
<script> 
$("selector").hover(function(){ 
$(this).stop().animate(); 
},function(){ 
$(this).stop().animate(); 
}) 
</script> 

clearQueue參數(shù)設(shè)置為true時(shí)，將清空當(dāng)前元素接下來(lái)尚未執(zhí)行完的動(dòng)畫隊(duì)列
例：

復(fù)制代碼代碼如下:

 
<script> 
$("selector").hover(function(){ 
$(this).stop(true).animate().animate() //如此時(shí)觸發(fā)光標(biāo)移出事件，直接跳過(guò)后面的動(dòng)畫隊(duì)列，避免執(zhí)行本隊(duì)列第二個(gè)動(dòng)畫 
},function(){ 
$(this).stop(true).animate().animate() 
}) 
</script> 

gotoEnd參數(shù)設(shè)置為true時(shí)，可將正在執(zhí)行的動(dòng)畫直接到達(dá)結(jié)束時(shí)刻的狀態(tài)
is(":animated")
判斷元素是否處于動(dòng)畫狀態(tài)，可用于防止動(dòng)畫累積
例：

復(fù)制代碼代碼如下:

 
<script> 
if(!$("selector").is(":animated")){ //判斷元素是否正處于動(dòng)畫狀態(tài) 
//如果當(dāng)前沒(méi)有進(jìn)行動(dòng)畫，則添加新動(dòng)畫 
} 
</script> 

7 其他動(dòng)畫方法
3個(gè)專門用于交互的動(dòng)畫方法：toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])

復(fù)制代碼代碼如下:

 
$("selector").toggle() 
切換元素的可見狀態(tài)，如元素隱藏則切換為可見，反之亦然 
$("selector").slideToggle() 
通過(guò)高度變化來(lái)切換元素的可見性 
$("selector").fadeTo() 
把元素的不透明度以漸進(jìn)方式調(diào)整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度將內(nèi)容調(diào)整到20%透明度 

8 動(dòng)畫方法概括

復(fù)制代碼代碼如下:

 
toggle()用來(lái)代替hide()和show() 
slideToggle()用來(lái)代替slideUp()和slideDown() 
animate()可代替所有動(dòng)畫方法 

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

鋒利的jQuery 要點(diǎn)歸納（三） jQuery中的事件和動(dòng)畫（下：動(dòng)畫篇）

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具