使用jQuery连续移动元素

我使用jQuery创建了一个游戏，并且我希望我的角色能够自动移动，直到碰到边界。这是在正确的方向我移动代码：使用jQuery连续移动元素

if (e.keyCode === 39 && (p1_left < 784)) { 
    $('#p1').rotate(0); 
    setInterval (function() { 
     $('#p1').animate({ left: "+=16px", }, 50); }, 50); 
}

这indefinetely移动我的性格的权利，我还没有想出自己如何创建一个塞子。

编辑：更新的代码段，新增的jsfiddle http://jsfiddle.net/BjCeq/

来源

2012-01-13 fnx

你不能直接在同步操作中循环使用，因为它会杀死浏览器。您需要使用超时或间隔来移动它，然后取消间隔。如果你想要一个代码示例，让我知道，我会写一个答案。 – 2012-01-13 21:27:19

总是定义“不起作用”。 – 2012-01-13 21:27:38

你从来没有真正增加pl_left这样的循环将只运行下去：

while (p1_left <= 784) { 
    pl_left+=16; 
    $('#p1').css('left', p1_left); 
}

但是，这不会给动画角色的运动，它似乎只是跳到终点。因为这个原因，循环是没有意义的。你可能想要的是要么使用setTimeout来移动每秒一个位置或其他东西。或者，你可以使用animate有一个回调函数：

function moveLeft(theID){ 
    $(theIE).animate({...},1000, function(){ 
     if(/* keep moving */){ 
      move_left(theID); 
     } 
    } 
}

来源

2012-01-13 21:25:38

你需要的是代码多数民众赞成不断调用。你的代码，就像你写的那样，被调用一次，并且它一次执行所有的DOM操作。你需要的是一个setInterval或setTimeout来触发你的代码在将来自己调用一定的毫秒数，每次增加css属性。最简单的方法是简单地使用jQuery.animate，它在内部运行这些方法。

var $p1 = $('#p1'); 
if (e.keyCode === 39 && (p1_left < 784)) { 
    $p1.rotate(0); 
    $p1.animate({ 'left' : 784 }); 
}

退房jQuery的动画文档的更多信息，包括如何设置选项，并用动画的每一帧运行一个回调函数：。

来源

2012-01-13 21:29:42 Amit

使用jQuery连续移动元素

回答

相关问题