文章同步發布在http://seanlin0324.blogspot.com/2012/04/jquery-cpu.html

前陣子在開發平板應用時
由於需要仿製Ipad上的主頁面
讓螢幕上排滿App 圖示的情況下
還必須要滑動換頁
公司的裝置在降頻且使用舊版webkit核心的瀏覽器下
顯得有些許頓挫感
後來想到可以針對jQuery動畫效果的部份去調整

這時候得手動調整
jQuery.fx.interval
範例DEMO on jsfiddle http://jsfiddle.net/4Wger/1/

我們先建立基本的HTML

  <p><input type="button" value="Run"/></p>
  <div class="box"></div>

這裡我們建了一個box及啟動按鈕

設定一下css 讓box有個顏色跟基本大小
這邊要注意的是
要做動畫效果必須要設定position為相對或是絕對定位

.box { 
    width:50px; 
    height:30px;
    background-color:#000;
    position: relative;        
}

再來就是重頭戲了:p
我們來建立按鈕事件
讓box每按一次移動 100px

jQuery.fx.interval = 18;

$("input").click(function(){
    $("div").animate({left:'+=100px'}, 500);
});​

jQuery.fx.interval 的型態為數字, 預設值為13毫秒
我們為了調整更新的效率
將它改為18

雖然只是小小的5毫秒
卻還是讓原本在平板上有頓挫感的程式
變成咻咻咻的流暢動畫
不過數字不能調太大
不然因為更新頻率間隔太長
反而會造成動畫效果不佳的情形