jQuery中關於如何使用animate自定義動畫

来源:http://www.cnblogs.com/john69-/archive/2016/05/29/5539458.html
-Advertisement-
Play Games

動畫 animate() 01.animate()方法的簡單使用 有些複雜的動畫通過之前學到的幾個動畫函數是不能夠實現,這時候就是強大的animate方法了。 操作一個元素執行3秒的淡入動畫,對比下一下2組動畫設置的區別。 顯而易見,animate方法更加靈活了,可以精確的控制樣式屬性從而執行動畫。 ...


動畫 animate()

  01.animate()方法簡單使用

  有些複雜的動畫通過之前學到的幾個動畫函數是不能夠實現,這時候就是強大的animate方法了。

  操作一個元素執行3秒的淡入動畫,對比下一下2組動畫設置的區別。

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

  顯而易見,animate方法更加靈活了,可以精確的控制樣式屬性從而執行動畫。

語法:

1 .animate( properties [, duration ] [, easing ] [, complete ] )
2 .animate( properties, options )

  .animate()方法允許我們在任意的數值的CSS屬性上創建動畫。2種語法使用,幾乎差不多了,唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對類似,除了屬性範圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合併成一個對象傳遞了。

參數分解:

properties:一個或多個css屬性的鍵值對所構成的Object對象。要特別註意所有用於動畫的屬性必須是數字的,除非另有說明;這些屬性如果不是數字的將不能使用基本的jQuery功能。比如常見的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以,因為參數是red或者GBG這樣的值,非常用插件,否則正常情況下是不能只能動畫效果的。註意,CSS 樣式使用 DOM 名稱(比如 "fontSize")來設置,而非 CSS 名稱(比如 "font-size")。

  特別註意單位,屬性值的單位像素(px),除非另有說明。單位em 和 %需要指定使用

1 .animate({
2     left: 50, 
3     width: '50px'   
4     opacity: 'show',  
5     fontSize: "10em",
6 }, 500);

除了定義數值,每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定製隱藏和顯示動畫用來控制元素的顯示或隱藏

.animate({
    width: "toggle"
});

如果提供一個以+= 或 -=開始的值,那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

.animate({ 
    left: '+50px'
}, "slow");

duration:時間

動畫執行的時間,持續時間是以毫秒為單位的;值越大表示動畫執行的越慢,不是越快。還可以提供'fast''slow'字元串,分別表示持續時間為200 和 600毫秒。

easing動畫運動的演算法:

jQuery庫中是預設的時調用 swing。在一個恆定的速度進行動畫,如果需要其他的動畫演算法,請查找相關的插件

complete回調

動畫完成時執行的函數,這個可以保證當前動畫確定完成後發會觸發

 

  02.animate() 方法來依次執行多個動畫

  animate在執行動畫中,如果需要觀察動畫的一些執行情況,或者在動畫進行中的某一時刻進行一些其他處理,我們可以通過animate的提供第二種設置語法,傳遞一個對象參數,可以拿到動畫執行狀態一些通知。

.animate( properties, options )

options參數

duration - 設置動畫執行的時間
easing - 規定要使用的 easing 函數,過渡使用哪種緩動函數
step:規定每個動畫的每一步完成之後要執行的函數
progress:每一次動畫調用的時候會執行這個回調,就是一個進度的概念
complete:動畫完成回調

如果多個元素執行動畫,回調將在每個匹配的元素上執行一次,不是作為整個動畫執行一次

列出常用的方式

 1 $('#elem').animate({
 2     width: 'toggle',  
 3     height: 'toggle'
 4   }, {
 5     duration: 5000,
 6     specialEasing: {
 7       width: 'linear',
 8       height: 'easeOutBounce'
 9     },
10     complete: function() {
11       $(this).after('<div>Animation complete.</div>');
12     }
13   });

 

調用animate()方法可以創建自定義動畫效果,它的調用格式為:

$(selector).animate({params},speed,[callback])

 

其中,params參數為製作動畫效果的CSS屬性名與值,speed參數為動畫的效果的速度,單位為毫秒,可選項callback參數為動畫完成時執行的回調函數名。

例如,調用animate()方法以由小到大的動畫效果顯示圖片,如下圖所示:

 1 <body>
 2     <h3>製作簡單的動畫效果</h3>
 3     <img src="images/1.png" alt=""/>
 4     <div id="tip"></div>
 5     <script type="text/javascript">
 6         $(function() {
 7             $('img').animate({
 8                 width: '100px';
 9                 height:'100px'
10             }, 3000, function() {
11                 $("#tip").html('執行完成!');
12             });
13         })
14     </script>
15 </body>

在瀏覽器中顯示的效果:

從圖中可以看出,調用animate()方法,以漸漸放大的動畫效果顯示圖片元素,當動畫執行完成後,通過回調函數在頁面的<div>元素中顯示“執行完成!”的字樣。

 

  03.stop()停止動畫

動畫在執行過程中是允許被暫停的,當一個元素調用.stop()方法,當前正在運行的動畫(如果有的話)立即停止。

語法:

 

.stop( [clearQueue ] [, jumpToEnd ] )
.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

 

stop還有幾個可選的參數,簡單來說可以這3種情況

  1 .stop(); 停止當前動畫,點擊在暫停處繼續開始。

  2 .stop(true); 如果同一元素調用多個動畫方法,尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始,直到第一個完成。當調用.stop()的時候,隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那麼在隊列中的動畫其餘被刪除並永遠不會運行。

  3 .stop(true,true); 當前動畫將停止,但該元素上的 CSS 屬性會被立刻修改成動畫的目標值。

簡單的說:參考下麵代碼:

1 $("#aaron").animate({
2     height: 300
3 }, 5000)
4 $("#aaron").animate({
5     width: 300
6 }, 5000)
7 $("#aaron").animate({
8     opacity: 0.6
9 }, 2000)
  1. stop():只會停止第一個動畫,第二個第三個繼續。
  2. stop(true):停止第一個、第二個和第三個動畫。
  3. stop(true ture):停止動畫,直接跳到第一個動畫的最終狀態。

 

如果動畫未完成停止了,那麼動畫完成時執行的回調函數是不會被調用的

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 單向鏈表每個節點由兩個成員組成:一個是數據域,一個是指向自身結構的指針類型成員。如: struct slist { int data; struct slist *next; }; typedef struct slist SLIST; 單向鏈表的基本演算法包括:鏈表的建立、節點數據域的輸出、節點的插 ...
  • 1.File類 File對象用來獲取文件本身的一些信息,例如文件所在目錄,文件的長度,文件讀寫許可權等,不涉及文件的讀寫操作。 創建一個File對象的構造方法有3個: 使用第一種構造方法創建File對象時,filename是文件名會被認為與當前應用程式在同一個目錄中。 File類常用方法 1.1.創建 ...
  • 1.意圖 動態地給一個對象添加一些額外的職責。就增加功能來說,Decorator模式相比生成子類更為靈活。 2.別名 包裝器 Wrapper. 3.動機 給某個對象而不是整個類添加一些功能。一個較為靈活的方式時將組件嵌入另一個對象中。 4.適用性 在不影響其它對象的情況下,以動態、透明的方式給單個對 ...
  • 一、表單(Form) 源碼文件:_form.scssmixins/_form.scss 1、按層次結構分:form-group -> form-control/input-group/form-static-control -> 各類標簽2、Form-group/form-control/input ...
  • 第1章 css和文檔 1,元素:替換元素(img input),非替換元素(大多數span)。 2,link:rel(代表關係:stylesheet,候選樣式表:alternate stylesheet);type(text/css);media:(all(所有表現媒體, screen,print) ...
  • 繼前面幾篇文章後再來說說老生常談的話題,怎麼樣提升前端性能。文中很多取材自網路及《High Performance Web Sites》,並根據自己工作中所接觸到的知識整理而成。 http://hovertree.com/menu/webfront/ 1. 減少HTTP請求 終端用戶響應時間80%消 ...
  • 對初學者來說應該學習的JavaScript編碼規範: 傳送門: http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=29292475&id=5019448 ...
  • 看到兩篇關於CSS的文章,總結的非常好。因為沒有那個網站的賬號,沒法收藏轉發,所以把鏈接貼在這裡,分享給大家。這兩篇文章對於初學CSS的人來說,總結得很精煉準確,而且通俗易懂。推薦~ 有關CSS的一些事--CSS和頁面佈局 http://blog.chinaunix.net/xmlrpc.php?r ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...