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