利用jQuery的動畫函數animate實現豌豆發射效果
- 高洛峰原創
- 2016-12-28 10:45:531153瀏覽
豌豆射手，草坪還有子彈都是現成的圖片，
1. jQuery是庫還是框架？
jQuery可以說是現在最受歡迎的一個js類別函式庫，而非框架。
之前在知乎上看到有人說了這樣一句話：
You call library. Framework calls you.
我深以為然，字面意思大概就是你可以無約束地使用類庫，卻需要在各種限制條件下使用一個框架。
我私以為，js 庫指的是直接和document文件元素互動的一個API，你可以直接引用庫，讓它為你服務。而框架是偏向架構的層次，你如果想要使用框架，就必須依照它的規則來。例如angular.js，它就給你提供方法的同時也約束了dom文件結構。
拿Java的三大框架來說，也是如此，你要想使用Spring，就得按照它的步驟來，就好像一個房子，鋼筋水泥已經弄好，你只需要進去裝修就OK了。而函式庫，就有點類似StringUtils的韻味，除了它暴露出來的接口，其他你都無需關心，直接呼叫就行了。
2. jQuery的animate函數
animate()函數用來執行一個以css屬性 time:過渡的時間
callback: 回呼函數
animate函數的功能主要是實現一些css樣式的過渡效果。
3.引入 jQuery
例如，現在我有一個div盒子。
$('#id').animate(css,time,callback);
在上面的程式碼中，我們引入了百度提供的jQuery檔案。
1.console.log($);
效果：
這說明引入成功了。
2.直接用瀏覽器驗證
打開你的頁面，按一下F12，出現這樣的控制台，這是瀏覽器自帶的（我這裡使用的是谷歌瀏覽器）。
輸入$
回車！
誒，這樣是不是也可以呢？
4. onmouseover事件
我們來為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> 
我們把alert去掉，加上下面的程式碼：
$('#box').on('mouseover',function(){
alert();
});這表示當我把滑鼠畫上去的時候，就改變寬度為600px，過渡時間為500毫秒。 
如果我們希望在寬度加倍後，令高度也加倍，又該如何做呢？
$('#box').on('mouseover',function(){
$('#box').animate({width:600},500);
});
這樣就有了一個先後順序。 
最後，附上一開始案例的程式碼，除了animate函數，還用到了js的定時器setInterval方法：
$('#box').on('mouseover',function(){
$('#box').animate({width:600},500,function(){
$('#box').animate({height:600},500);
});
});總結以上就是這篇文章的全部內容，希望對大家的學習和工作能有所幫助。如果有疑問可以留言交流，謝謝大家對PHP中文網的支持。
更多利用jQuery的動畫函數animate實現豌豆發射效果相關文章請關注PHP中文網！