由於需要仿製Ipad上的主頁面
讓螢幕上排滿App 圖示的情況下
還必須要滑動換頁
公司的裝置在降頻且使用舊版webkit核心的瀏覽器下
顯得有些許頓挫感
後來想到可以針對jQuery動畫效果的部份去調整
這時候得手動調整
jQuery.fx.interval
下面開始範例
範例DEMO on jsfiddle
我們先建立基本的HTML
<!DOCTYPE html> <html> <body> <p><input type="button" value="Run"/></p> <div class="box"></div> </body> </html>
這裡我們建了一個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毫秒
卻還是讓原本在平板上有頓挫感的程式
變成咻咻咻的流暢動畫
不過數字不能調太大
不然因為更新頻率間隔太長
反而會造成動畫效果不佳的情形
沒有留言:
張貼留言