Question

So I have this code:

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

The problem is that I can only press “a” once and #character moves only once…

I also have jQuery draggable enabled (http://jqueryui.com/demos/draggable/) with a constrained area around it.

How come I can only move the div once with keypress?

Answer 1

I don’t think that jQuery will interpret that “+=40” on a call to .css(). I suspect that it only moves once because the first time you blast away whatever the “left” value originally was and set it to the string “+=40”, which the browser ignores. Subsequent clicks just repeat that.

I might be wrong, but I’ve been reading the jQuery source and I see nothing to suggest that the .css() function does what .animate() does with values like that.

You might try using .animate() directly:

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