javascriptのタイマーとCSS位置の更新

Question

次のコードを使用して、id = 'ブロック'の単純なdiv要素をページ下に移動しようとしています。しかし、私は私の移動機能は、2番目の呼び出しに1.78957e + 7px 0〜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); 

そうでなければあなたはが機能を呼び出し、100ミリ秒に呼び出されるものとして、その戻り値（undefined）を使用しています。

Answer 2

animateを使用して再帰的な関数呼び出しを行うと、よりスムーズに移行できます。例：

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