jQuery的在屏幕上移動一個div，點點滴滴

所以我有這樣的代碼：jQuery的在屏幕上移動一個div，點點滴滴

$(document).ready(function() { 
      $(document).keypress(function(e) 
      { 
       switch(e.which) 
       { 
        // user presses the "a" 
        case 97: $('#character').css('left','+=40'); 
       } 
      } 
}

的問題是，我只能按「A」一次，#character只有一次移動...

我也有jQuery拖動啓用（http://jqueryui.com/demos/draggable/）周圍有一個約束區域。

爲什麼我只能用按鍵移動div一次？

來源

2010-07-15 Barrie Reader

我不認爲jQuery會在.css()的調用中解釋「+ = 40」。我懷疑它只會移動一次，因爲你第一次拋出原先的「左」值，並將其設置爲瀏覽器忽略的字符串「+ = 40」。隨後的點擊只需重複一次即可。

我可能是錯的，但我一直在閱讀jQuery源代碼，並且我沒有看到任何暗示.css()函數執行.animate()對此類值的處理。

您可以嘗試直接使用.animate()：

case 97: $('#character').animate({'left': '+=40'}, 1);

來源

2010-07-15 13:28:09 Pointy

同意。並且你可以使用'animate（）'，其持續時間設置爲0.如果'css（）'支持，效果相同'+ =' – peirix 2010-07-15 13:30:18

謝謝@peiX我不會使用'.animate（）'所以我不能100％確定0會起作用。我懷疑你是對的。 – Pointy 2010-07-15 13:34:16

不錯的解決方案，這裏是一個工作實現： http://jsbin.com/eripu – 2010-07-15 13:38:58

我想你會需要得到字符的位置，添加40到它的左邊，然後應用CSS改變，例如

var pos = $("#character").offset(); 

$("#character").animate({"left": pos.left + 40}, 100);

如果你在其他地方存儲角色的位置，你也可以更新該值並更新它在遊戲循環中的位置。

來源

2010-07-15 13:36:45

jQuery會理解調用'.animate（）'中的「+ =」符號。 – Pointy 2010-07-15 13:39:32

您可以將函數傳遞給第二個參數.css()，您可以在其中手動對要設置的值進行一些操作。

試試這個：

 // The 'left' parameter in the function references the current position. 

case 97:$('#character').css('left',function(i,left){ 
            return parseInt(left) + 40; 
           });

編輯：正如@Gaby指出，調用.replace('px','')是不必要的，因爲.parseInt()自動處理這一點。

來源

2010-07-15 13:37:12 user113716

雖然它更簡潔，但不需要刪除'px'，因爲'parseInt'只會處理它在字符串中找到的第一個數字。 – 2010-07-15 13:52:19

@Gaby +1謝謝，我不知道。我會更新。：O） – user113716 2010-07-15 13:57:11

我很驚訝它做任何事情！

你錯過了一對夫婦）; 我也調整了一下。這工作！

$(document).ready(function() { 
    $(document).keypress(function (e) { 
     switch (e.which) { 
      // user presses the "a" 
      case 97: 
       var left = parseInt($('#character').css('left')) + 40; 

       $('#character').css('left', left + 'px'); 
     } 
    }); 
});

來源

2010-07-15 13:39:29 Patricia

jQuery的在屏幕上移動一個div，點點滴滴

回答

相關問題