先上圖炕舵。
動態(tài)效果：
豌豆射手，草坪還有子彈都是現(xiàn)成的圖片跟畅，本文主要講解jQuery的animate函數(shù)的基本用法咽筋。
1. jQuery是庫還是框架？
jQuery可以說是現(xiàn)在最流行的一個js類庫徊件，而非框架奸攻。
之前在知乎上看到有人說了這樣一句話：
You call library. Framework calls you.
我深以為然，字面意思大概就是你可以無約束地使用類庫虱痕，卻需要在各種限制條件下使用一個框架睹耐。
我私以為，js 庫指的是直接和document文檔元素交互的一個API部翘，你可以直接引用庫硝训，讓它為你服務(wù)。而框架是偏向于架構(gòu)的層次，你如果想要使用框架窖梁，就必須按照它的規(guī)則來赘风。比如angular.js，它就給你提供方法的同時還約束了dom文檔結(jié)構(gòu)纵刘。
拿Java的三大框架來說邀窃，也是如此，你要想使用Spring假哎，就得按照它的步驟來瞬捕，就好像一個房子，鋼筋水泥已經(jīng)弄好位谋，你只需要進去裝修就OK了山析。而庫，就有點類似于StringUtils的韻味掏父，除了它暴露出來的接口笋轨，其他你都無需關(guān)心，直接調(diào)用就行了赊淑。
2. jQuery的animate函數(shù)
基本用法：
$('#id').animate(css,time,callback);
css : 你最終需要實現(xiàn)的樣式列表
time: 過渡的時間
callback: 回調(diào)函數(shù)
animate函數(shù)的作用主要就是實現(xiàn)一些css樣式的過渡效果爵政。
3.引入 jQuery
比如，現(xiàn)在我有一個div盒子陶缺。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
#box {
width: 300px;
height: 300px;
background:greenyellow;
}
</style>
</head>
<body>
<div id='box'></div>
</body>
<script>
</script>
</html>
在上面的代碼中钾挟，我們引入了百度提供的jQuery文件。
那么如何快速判斷是否引入成功了呢饱岸？提供以下幾個方法：
1.console.log($);
效果：
這說明引入成功了掺出。
2.直接用瀏覽器驗證
打開你的頁面，按一下F12苫费，出現(xiàn)這樣的控制臺汤锨，這是瀏覽器自帶的（我這里使用的是谷歌瀏覽器）。
輸入$
回車百框！
誒闲礼，這樣是不是也可以呢？
3. onmouseover事件
我們來給div盒子添加一個鼠標劃上去的事件铐维。
$('#box').on('mouseover',function(){
alert();
});
劃上去：
嗯柬泽，最起碼，這說明我們到目前為止的代碼都是正確的嫁蛇，我初學(xué)js的時候就喜歡這樣锨并，讓我感覺每一行代碼都寫得很放心。
3.用animate函數(shù)改變盒子寬度和高度
我們把alert去掉睬棚，加上下面的代碼：
$('#box').on('mouseover',function(){
$('#box').animate({width:600},500);
});
這表示當我把鼠標畫上去的時候琳疏，就改變寬度為600px有决，過渡時間為500毫秒。
如果我們希望在寬度加倍后空盼，令高度也加倍，又該如何做呢新荤？
對了揽趾，用回調(diào)函數(shù)，當?shù)谝粋€動畫執(zhí)行完畢苛骨，就繼續(xù)執(zhí)行下一個動畫：
$('#box').on('mouseover',function(){
$('#box').animate({width:600},500,function(){
$('#box').animate({height:600},500);
});
});
這樣就有了一個先后順序篱瞎。
本文簡單地介紹了一下jQuery animate函數(shù)的使用。
5. 附錄
最后痒芝，附上一開始案例的代碼俐筋，除了animate函數(shù)，還用到了js的定時器setInterval方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<style type="text/css">
body {
background: url(background1.jpg) no-repeat;
position: fixed;
}
ul li {
list-style: none;
}
.wrap {
position: relative;
left: 170px;
top: 65px;
}
.plants1 {
display: inline-block;
position: relative;
left:35px;
}
.plants1 .plant {
position: relative;
margin-bottom:20px;
}
.plants1 .plant .PB00 {
position: absolute;
top:-2px;
left:15px;
}
.plants2 {
display: inline-block;
position: relative;
left:2px;
}
.plants2 .plant {
position: relative;
margin-bottom:20px;
}
.plants2 .plant .PB00 {
position: absolute;
top:-2px;
left:15px;
}
.plants3 {
display: inline-block;
position: relative;
left:-40px;
}
.plants3 .plant {
position: relative;
margin-bottom:20px;
}
.plants3 .plant .PB00 {
position: absolute;
top:-2px;
left:15px;
}
</style>
</head>
<body>
<div class='wrap'>
<ul class='plants1'>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
</ul>
<ul class='plants2'>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
</ul>
<ul class='plants3'>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
<li class='plant'>
<img class='Peashooter' src="img/Peashooter.gif" />
<img class='PB00' src="img/PB00.gif" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
function randomNum(num){
return Math.floor(Math.random()*(num+1));
};
setInterval(function(){
var $this = $('.PB00').eq(randomNum(17));
$this.animate({'margin-left' : 1000},2000,function(){
$this.css({'margin-left' : 0});
});
},10);
</script>
</html>
