Question

我正在使用以下代码尝试向下移动一个id ='block'的简单div元素。但是使用警报我发现我的移动功能使得css top值在第二次调用时从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);
}

有关如何使这项运动顺利进行的任何建议吗？

Answer 1

您应该将此用于setTimeout：

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

否则你调用函数并使用其返回值（undefined）作为要在100ms内调用的函数。

Answer 2

您可以使用animate进行递归函数调用，这将使转换更加平滑。例如：

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

javascript定时器和css位置更新

2 个答案: