利用jQuery的動畫函數animate實現豌豆發射效果-js教程-PHP中文網

首頁

web前端

js教程

利用jQuery的動畫函數animate實現豌豆發射效果

Dec 28, 2016 am 10:45 AM

jquery animate

豌豆射手，草坪還有子彈都是現成的圖片，

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盒子。

1	`$('#id').animate(css,time,callback);`

登入後複製

在上面的程式碼中，我們引入了百度提供的jQuery檔案。

那麼如何快速判斷是否引入成功了呢？提供以下幾個方法：

1.console.log($);

效果：

這說明引入成功了。

2.直接用瀏覽器驗證

打開你的頁面，按一下F12，出現這樣的控制台，這是瀏覽器自帶的（我這裡使用的是谷歌瀏覽器）。

利用jQuery的動畫函數animate實現豌豆發射效果

輸入$

回車！

利用jQuery的動畫函數animate實現豌豆發射效果

誒，這樣是不是也可以呢？

4. onmouseover事件利用jQuery的動畫函數animate實現豌豆發射效果

我們來為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=&#39;box&#39;></div>
 </body>
  
 <script>
  
 </script>
  
</html>

登入後複製

利用jQuery的動畫函數animate實現豌豆發射效果

劃上去：

嗯，最起碼，這表示我們到目前為止的程式碼都是正確的，我初學js的時候就喜歡這樣，讓我感覺每一行程式碼都寫得很放心。

5.用animate函數改變盒子寬度和高度

我們把alert去掉，加上下面的程式碼：

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 alert();
});

登入後複製

這表示當我把滑鼠畫上去的時候，就改變寬度為600px，過渡時間為500毫秒。利用jQuery的動畫函數animate實現豌豆發射效果

如果我們希望在寬度加倍後，令高度也加倍，又該如何做呢？

對了，用回呼函數，當第一個動畫執行完畢，就繼續執行下一個動畫：

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500);
});

登入後複製

這樣就有了一個先後順序。利用jQuery的動畫函數animate實現豌豆發射效果

本文簡單介紹了一下jQuery animate函數的使用。

6. 附錄

最後，附上一開始案例的程式碼，除了animate函數，還用到了js的定時器setInterval方法：利用jQuery的動畫函數animate實現豌豆發射效果

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500,function(){
  $(&#39;#box&#39;).animate({height:600},500);
 });
});

登入後複製

總結

以上就是這篇文章的全部內容，希望對大家的學習和工作能有所幫助。如果有疑問可以留言交流，謝謝大家對PHP中文網的支持。

更多利用jQuery的動畫函數animate實現豌豆發射效果相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn