自定義動畫 (jQuery)

1jQuery中動畫animate(上)

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

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

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

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

語法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.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 和 %須要指定使用

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

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

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

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

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

duration時間

動畫執行的時間，持續時間是以毫秒爲單位的；值越大表示動畫執行的越慢，不是越快。還能夠提供'fast' 和 'slow'字符串，分別表示持續時間爲200 和 600毫秒。

easing動畫運動的算法

jQuery庫中默認調用 swing。若是須要其餘的動畫算法，請查找相關的插件

complete回調

動畫完成時執行的函數，這個能夠保證當前動畫肯定完成後發會觸發

2jQuery中動畫animate(下)

animate在執行動畫中，若是須要觀察動畫的一些執行狀況，或者在動畫進行中的某一時刻進行一些其餘處理，咱們能夠經過animate提供的第二種設置語法，傳遞一個對象參數，能夠拿到動畫執行狀態一些通知

.animate( properties, options )

options參數

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

其中最關鍵的一點就是：

若是多個元素執行動畫，回調將在每一個匹配的元素上執行一次，不是做爲整個動畫執行一次

列出經常使用的方式：

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

3jQuery中中止動畫stop

動畫在執行過程當中是容許被暫停的，當一個元素調用.stop()方法，當前正在運行的動畫（若是有的話）當即中止

語法：

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

stop還有幾個可選的參數，簡單來講能夠這3種狀況

• .stop(); 中止當前動畫，點擊在暫停處繼續開始
• .stop(true); 若是同一元素調用多個動畫方法，還沒有被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫當即開始。若是clearQueue參數提供true值,那麼在隊列中的動畫其他被刪除並永遠不會運行
• .stop(true,true); 當前動畫將中止，但該元素上的 CSS 屬性會被馬上修改爲動畫的目標值

簡單的說：參考下面代碼、

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

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