Move div with arrow key in jQuery 1.6.1 does not work

Question

In JQuery 1.6.1, we can supposedly use += or -= with css() just as we can do with animate(), but this isn't working. Does anyone see a problem with the code?

$(document).keydown(function(e) {  
    if (e.which == 37) { //37 left arrow key.
        $('div').css('left', '-=10px')
    }
});

Check http://jsfiddle.net/QLFEy/3

Answer 1

Your code is correct and should work. Looking at jQuery bug tracker, i found an already open ticket for this at http://bugs.jquery.com/ticket/9237. It works with width and height but not with left at least. According to the ticket, fix should be available in 1.6.2

Update 05/13/11

The issue has been fixed and the fix is currently available in the WIP version which can be found at http://code.jquery.com/jquery-git.js. This is the very latest non production version of jQuery with most recent fixes. The fix should be be officially available in the upcoming 1.6.2 version.

Answer 2

Obviously a bug in jQuery. It seems like jQuery is not adding "px" after the value.

[2011-05-12 21:46:17] CSS - file://localhost/D:/test.html
DOM style property
Invalid value for property: margin-left
Line 1:
  260
  ---^