JQuery перемещение DIV по экрану, по крупицам

Question

Так что у меня этот код:

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

Проблема заключается в том, что я могу только нажать «» раз и #character движется только один раз ...

У меня также есть jQuery draggable enabled (http://jqueryui.com/demos/draggable/) с ограниченной областью вокруг него.

Почему я могу только переместить div один раз нажатием клавиши?

Answer 1

Я не думаю, что jQuery будет интерпретировать это сообщение «+ = 40» при вызове .css(). Я подозреваю, что он перемещается только один раз, потому что в первый раз, когда вы взорвали все исходное значение «слева» и установили его в строку «+ = 40», которую браузер игнорирует. Последующие клики просто повторяют это.

Возможно, я ошибаюсь, но я читал источник jQuery, и я не вижу ничего, чтобы предположить, что функция .css() делает то, что делает .animate() со значениями, подобными этому.

Вы можете попробовать использовать .animate() непосредственно:

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

Answer 2

Я думаю, что вы будете нуждаться, чтобы получить позицию символа, добавьте 40 к его левой, а затем применить изменения CSS, например

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

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

Если вы сохраняете позицию символа в другом месте, вы также можете просто обновить это значение и обновить его положение в игровом цикле.

Answer 3

Вы можете передать функцию второму параметру .css(), где вы можете вручную выполнить некоторые манипуляции с установленным значением.

Попробуйте это:

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

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

EDIT: Как отметил @Gaby, призыв к .replace('px','') не было необходимости, поскольку .parseInt() заботится о том, что автоматически.

Answer 4

Я удивлен, что он вообще что-то делает!

ваша пропавшая пара); , и я также немного подделал его. это работает!

$(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'); 
     } 
    }); 
});