jquery動畫總結

jquery動畫總結
基本動畫show() //直接顯示元素，沒有動畫show(speed, [callback]) //有動畫，有回呼函數hide() //直接隱藏元素，沒有動畫hide(speed, [callback]) //有動畫，有回呼函數toggle() //切換可見狀態toggle(speed, [callback]) //有動畫效果toggle(switch) //switch決定是顯示還是隱藏滑動動畫slideDown(speed, [callback]) //向下增加高度，以顯示內容，有動畫效果slideUp(speed, [callback]) //向上減小高度，以隱藏內容，有動畫效果slideToggle(speed, [callback]) //動態改變高度，動態顯示和隱藏淡入淡齣動畫fadeIn(speed, [callback]) //淡入效果，動畫結束會改變display來顯示元素fadeOut(speed, [callback]) //淡出效果，動畫結束會改變display來隱藏元素fadeTo(speed, opacity, [callback]) //動態改變透明度效果，不影響display屬性自訂動畫animate(params, [duration], [easing], [callback]) 屬性值一般為數字，也可以是hide，show，toggle關鍵字屬性值也可以是數組形式，第一個數組元素是屬性的最終狀態，第二個數組元素是easing 函式不能使用margin-left這種形式，而需要使用駝峰形式marginLeft可以使用em和%，也可以使用+=或者-=讓元素做相對運動如果duration=0，那麼直接完成動畫animate(params, options) 基本同上需要注意easing和specialEasing參數，前面提到過params中也可以設定easing 函式，需要注意優先順序queue參數決定當前動畫是否排入佇列，預設值為true，表示加入預設隊列fx；如果是false代表不排入佇列；如果是字串，代表加入自訂隊列，加入自訂隊列後不會自動運行而需要自己調用dequeue(queueName)來啟動step參數表示執行動畫的每一步，可以用來實現自訂動畫stop([queueName], [clearQueue], [gotoEnd]) 如果clearQueue=true，那麼清空動畫隊列如果gotoEnd=true，那麼立即完成當前動畫，可能會有閃爍現象對animate函數的總結： 一個元素調用animate設定多個屬性，代表多個屬性同時動畫一個元素調用多次animate，那麼動畫效果是一個接著一個的多個元素分別調用animate，那麼多個元素同時動畫可以利用回呼函數實現多個元素一個接著一個動畫下面使用動畫隊列實現多個元素一個接著一個動畫，不依賴回呼函數動畫隊列queue([queueName]) //返回數組，代表事件隊列queue([queueName], [queueArray]) //替換隊列，如果是空數組也可以達到清空隊列的目的queue([queueName], [callback]) //添加函數到隊列dequeue([queueName]) //返回下一個函數，並且執行它，該函數必須直接或者間接的調用dequeue函數，直到隊列為空白clearQueue([queueName]) //清空隊列delay(duration, [queueName]) //添加延遲到隊列中動畫隊列總結： 除去show();hide();toggle();這些不帶參數的函數，其它動畫函數都會添加到隊列中動畫隊列和Promise有點像，但還是不一樣，Promise函數每次調用傳回值都是Deferred對象，所以可以鏈式調用；動畫隊列是依靠迴圈調用dequeue函數來實現一個接著一個執行函數。動畫隊列和動畫隊列名稱是相關的，預設名稱是fx，但是和調用對象也是相關的。可以添加任意函數到隊列中，就算是ajax，setTimeout等非同步函數，咱也可以在其回呼函數中調用dequeue函數，從而達到依次執行的目的。動畫全域控制jquery.fx.off=true; 沒有動畫效果，立即完成動畫jquery.fx.interval=13; 動畫間隔，預設值是13，值越小，動畫效果越流暢，也更加消耗CPU資源；值越大，動畫效果就越不流暢。判斷是否正在動畫$this.is(":animated"); 擴充animate函數主要就是擴充$.fx.step對象，比如： 

// jquery.path.js外掛程式，實現貝茲路徑動畫jQuery.fx.step.path = function(fx) {  var css = fx.end.css( 1 - fx.pos );  if ( css.prevX != null ) {    jQuery.cssHooks.transform.set( fx.elem, "rotate(" + Math.atan2(css.prevY - css.y, css.prevX - css.x) + ")" );  }  fx.elem.style.top = css.top;  fx.elem.style.left = css.left;};// jQuery UI 顏色動畫jQuery.fx.step[ hook ] = function( fx ) {   if ( !fx.colorInit ) {      fx.start = color( fx.elem, hook );      fx.end = color( fx.end );      fx.colorInit = true;   }   jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );};// animate函數可以實現size屬性動畫效果jQuery.fx.step['size'] = function(fx){   if ( !fx._sizeInit )   {      var \$el = \$(fx.elem),          c = fx.end.center || {top: 0, left: 0};      fx.start = \$el.offset();      $.extend(fx.start, {width: $el.width(), height: $el.height()});      fx._sizer = {};      fx._sizer.topDelta = c.top - (c.top * fx.end.height / fx.start.height);      fx._sizer.leftDelta = c.left - (c.left * fx.end.width / fx.start.width);      fx._sizer.widthDelta = fx.end.width - fx.start.width;      fx._sizer.heightDelta = fx.end.height - fx.start.height;      fx._sizeInit = true;   }   fx.elem.style.top = fx.start.top + Math.floor(fx._sizer.topDelta * fx.pos) + 'px';   fx.elem.style.left = fx.start.left + Math.floor(fx._sizer.leftDelta * fx.pos) + 'px';   fx.elem.style.width = fx.start.width + Math.floor(fx._sizer.widthDelta * fx.pos) + 'px';   fx.elem.style.height = fx.start.height + Math.floor(fx._sizer.heightDelta * fx.pos) + 'px';}