javascript計時器和css位置更新

Question

我正在使用下面的代碼嘗試並將id ='block'的簡單div元素向下移動一頁。但使用提醒我看到我的移動功能，使從0到1.78957e + 7px的CSS的頂值跳躍在第二次調用：

function init() 
{ 
var block = $('#block'); 
block.css({backgroundColor:'#ff0000', 
       position:'absolute', 
       top:'0px', 
       left:'0px', 
       height:'30px', 
       width:'30px'}); 
block.vx = block.vy = 0.0001; 
setTimeout(move(block,null),100); 
} 

function move(obj, t1) 
{ 
if(t1==null)t1=new Date().getTime(); 
var t2 = new Date().getTime() - t1; 
var rel_top = obj.vy*t2; 
var rel_left = obj.vx*t2; 
obj.css('top','+='+rel_top+'px'); 
setTimeout(move(obj,t2),100); 
} 

任何建議，如何使這個平穩的運動嗎？

Answer 1

您應該使用此爲setTimeout：

setTimeout(function() {move(obj,t2);},100); 

否則你是調用功能，並使用它的返回值（undefined）的東西在100毫秒被調用。

Answer 2

您可以使用animate進行遞歸函數調用，這將使轉換更平滑。例如：

function move() 
{ 
    $('#block').animate({ top: '+=' + rel_top + 'px' }, function() 
    { 
     move(); 
    }); 
}