javascript 计时器和 css 位置更新答案

【问题标题】：javascript timers and css position updatesjavascript 计时器和 css 位置更新
【发布时间】：2012-03-19 21:38:41
【问题描述】：

我正在使用以下代码尝试将一个简单的 id='block' div 元素向下移动到页面中。但是使用警报我看到我的 move 函数使 css 顶部值在第二次调用时从 0 跳转到 1.78957e+7px：

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);
}

有什么建议可以让这个动作流畅吗？

【问题讨论】：

标签： javascript jquery css datetime animation

【解决方案1】：

您应该将其用于setTimeout：

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

否则，您将调用该函数并使用其返回值 (undefined) 作为要在 100 毫秒内调用的对象。

【讨论】：

【解决方案2】：

您可以使用animate 进行递归函数调用，这将使过渡更加平滑。示例：

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

【讨论】：