使用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連續移動元素

回答

相關問題