jQuery moving a div across the screen, bit by bit

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);

Answer 2

I think you're going to need to get the position of the character, add 40 to it's left and then apply the css change, for example

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

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

If you're storing the position of the character somewhere else you can also just update that value and update it's position in the game loop.

Answer 3

You can pass a function to the second parameter of .css() where you can manually do some manipulation on the value to set.

Try this:

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

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

EDIT: As noted by @Gaby, the call to .replace('px','') was unnecessary, as .parseInt() takes care of that automatically.

Answer 4

I'm surprised it does anything at all!

your missing a couple ); and i also tweaked it a bit. this works!

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