jQuery中animate()方法用法實(shí)例

更新時間：2014年12月24日 12:03:00 投稿：shichen2014

這篇文章主要介紹了jQuery中animate()方法用法,以實(shí)例形式分析了animate()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下

本文實(shí)例講述了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。需要特別注意以下三點(diǎn):

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ù)，于是彈出一個提示框。
實(shí)例代碼:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dbjr.com.cn/" />

<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ù)、隊(duì)列等等都要放在大括號{}中。例如:

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

$("div").animate( {width:"1000px"}, {queue:false, duration:1000,complete:function(){alert("ok")}})

queue參數(shù)可以規(guī)定動畫是否加入動畫隊(duì)列執(zhí)行，如果進(jìn)入動畫隊(duì)列，將按照順序執(zhí)行，也就是第一個動畫執(zhí)行完成之后，隊(duì)列中的第二個動畫再執(zhí)行，以此類推。如果queue參數(shù)值為true就是將動畫加入隊(duì)列執(zhí)行，否則就是不加入隊(duì)列。
duration參數(shù)就是定義動畫的持續(xù)時間。
complete參數(shù)定義動畫的回調(diào)函數(shù)。
實(shí)例代碼:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dbjr.com.cn/" />

<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>