本文實例講述了jQuery中animate()方法用法。分享給大家供大家參考。具體分析如下：
此方法用于創(chuàng)建自定義動畫，并且能夠規(guī)定動畫執(zhí)行時長、擦除效果。動畫完成后還可以地觸發(fā)一個回調(diào)函數(shù)。
animate()方法的使用:
方式一:
以“屬性名/值”對象的方式定義動畫終止樣式屬性。例如:
復(fù)制代碼 代碼如下:$("div").animate( {width:"1000px"})
以上代碼能夠?qū)iv從原有的寬度調(diào)整到1000px。也可以一次性使用多組“屬性名/值”對象。例如:
復(fù)制代碼 代碼如下:$("div").animate( {width:"1000px",fontSize:20})
以上代碼能夠?qū)iv從原有的寬度調(diào)整到1000px，從原有的字體大小調(diào)整到20px。需要特別注意以下三點:
1.如果尺寸沒有單位，那么默認(rèn)單位是px。
2.屬性值需要用雙引號包裹，如果屬性值是數(shù)字的話可以省略。
3.類似font-szie或者background-color這樣的屬性需要去掉中間的中橫線，并且第二個單詞首字母要大寫。
animate()方法可以明確的規(guī)定動畫效果持續(xù)的時間，如果不規(guī)定則使用默認(rèn)值normal。例如:
復(fù)制代碼 代碼如下:$("div").animate( {width:"1000px",fontSize:20},2000)
以上代碼規(guī)定動畫效果在2000毫秒(2秒)后完成。
在動畫執(zhí)行完成后可以調(diào)用回調(diào)函數(shù)。例如:
復(fù)制代碼 代碼如下:$("div").animate( {width:"1000px"},5000,function(){alert("調(diào)整完成")})
以上代碼能夠在動畫完成以后觸發(fā)回調(diào)函數(shù)，于是彈出一個提示框。
實例代碼:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>腳本之家</title>
<style type="text/css">
div{
width:150px;
height:150px;
border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate( {width:"1000px",fontSize:20},5000,function(){alert("調(diào)整完成")});
});
});
</script>
</head>
<body>
<div>小螞蟻</div>
<button id="btn1">執(zhí)行個動畫</button>
</body>
</html>
方式二:
方式一中，只有定義動畫終止樣式屬性的時候使用大括號{}，后面比如動畫速度、回調(diào)函數(shù)等等都是裸露的，他們之間都是用逗號間隔。在我們將要介紹的方式二中，速度、回調(diào)函數(shù)、隊列等等都要放在大括號{}中。例如:
復(fù)制代碼 代碼如下:$("div").animate( {width:"1000px"}, {queue:false, duration:1000,complete:function(){alert("ok")}})
queue參數(shù)可以規(guī)定動畫是否加入動畫隊列執(zhí)行，如果進(jìn)入動畫隊列，將按照順序執(zhí)行，也就是第一個動畫執(zhí)行完成之后，隊列中的第二個動畫再執(zhí)行，以此類推。如果queue參數(shù)值為true就是將動畫加入隊列執(zhí)行，否則就是不加入隊列。
duration參數(shù)就是定義動畫的持續(xù)時間。
complete參數(shù)定義動畫的回調(diào)函數(shù)。
實例代碼:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>腳本之家</title>
<style type="text/css">
.first{
width:150px;
height:150px;
border:1px solid blue;
}
.second{
width:150px;
height:150px;
border:1px solid blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$(".first").animate({width:"1000px"},{queue:true, duration:5000,complete:function a(){alert("寬度設(shè)置完成")}})
.animate( {fontSize:'7em'},{queue:true, duration:5000})
.animate( {borderWidth:10},{queue:true, duration:5000,complete:function a(){alert("寬度設(shè)置完成")}});
});
$("#btn2").click(function(){
$(".second").animate({width:"1000px"},{queue:false, duration:1000})
.animate( {fontSize:'7em'} , 1000 )
.animate( {borderWidth:10}, 1000);
})
})
</script>
</head>
<body>
<div class="first">歡迎來到腳本之家</div>
<div class="second">歡迎來到腳本之家</div>
<button id="btn1">執(zhí)行第一個動畫</button>
<button id="btn2">執(zhí)行第二個動畫</button>
</body>
</html>
大家可以對比一下加入動畫隊列和不加入動畫隊列執(zhí)行效果。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試