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

時間 2019-11-17

標籤 jquery 關於如何使用 animate 自定義動畫欄目 JQuery 简体版

原文原文鏈接

動畫 animate()javascript

　　01.animate()方法的簡單使用css

　　有些複雜的動畫經過以前學到的幾個動畫函數是不可以實現，這時候就是強大的animate方法了。html

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

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

　　顯而易見，animate方法更加靈活了，能夠精確的控制樣式屬性從而執行動畫。算法

語法：瀏覽器

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

　　.animate()方法容許咱們在任意的數值的CSS屬性上建立動畫。2種語法使用，幾乎差很少了，惟一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對相似，除了屬性範圍作了更多限制。第二個參數開始能夠單獨傳遞多個實參也能夠合併成一個對象傳遞了。ide

參數分解：函數

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)

stop()：只會中止第一個動畫，第二個第三個繼續。
stop(true)：中止第一個、第二個和第三個動畫。
stop(true ture)：中止動畫，直接跳到第一個動畫的最終狀態。

若是動畫未完成中止了，那麼動畫完成時執行的回調函數是不會被調用的

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。