javascript - 使用 jQuery 连续移动元素

Question

我正在使用 jQuery 创建一个游戏，我希望我的 Angular 色能够自动移动，直到到达边界。这是我在正确方向上的移动代码:

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

这会将我的 Angular 色无限地向右移动，但我自己还没弄清楚如何创建一个塞子。

编辑:更新了代码片段，添加了 jsfiddle http://jsfiddle.net/BjCeq/

Answer 1

您实际上从未增加pl_left，因此循环将永远运行:

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

但是，这不会为 Angular 色的运动设置动画，它看起来只是跳到终点。因此，循环是毫无意义的。您可能想要的是使用 setTimeout 每秒移动一个位置或其他内容。或者，您可以将 animate 与回调函数一起使用:

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