jquery位置随着.css（）变化而表现得很奇怪

Question

I tried to make a moving img , and it works partially. If I press the right, up or down button, it moves right, up or down. But, if I press the left button, it jumps very fast very far to the right, and then back to the left and doesn't stop moving (I believe. I said it was fast).

JSFiddle ;
Javascript:

$(document).ready(function() {
    var up = down = left = right = false;
    var top = 100, left = 500;
    $("body").on("keydown", function(e) {
        if(e.keyCode == 39) {e.preventDefault(); if (right == false) right = setInterval(moveRight, 80);}
        else if(e.keyCode == 37) {e.preventDefault(); if (left == false) left = setInterval(moveLeft, 80);}
        else if(e.keyCode == 38) {e.preventDefault(); if (up == false) up = setInterval(moveUp, 80);}
        else if(e.keyCode == 40) {e.preventDefault(); if (down == false) down = setInterval(moveDown, 80);}
    });
    $("body").on("keyup", function(e) {
        if(e.keyCode == 39) {clearInterval(right); right = false;}
        else if(e.keyCode == 37) {clearInterval(left); left = false;}
        else if(e.keyCode == 38) {clearInterval(up); up = false;}
        else if(e.keyCode == 40) {clearInterval(down); down = false;}
    });

    function moveUp() {
        top -= 2;
        $("#player").css("top", top + "px");
    }
    function moveDown() {
        top += 2;
        $("#player").css("top", top + "px");
    }
    function moveLeft() {
        left -= 2;
        $("#player").css("left", left + "px");
    }
    function moveRight() {
        left += 2;
        $("#player").css("left", left + "px");
    }
});

This is probably not the best way to do this, I'm open for better suggestions.

Answer 1

You're defining two "left" variables, and they are getting in the way of each other. Change one of their names (perhaps leftInterval for the interval variable), and things should go better.

Answer 2

The variables are overwritten, try something like :

$("body").on("keydown", function(e) {
    e.preventDefault();
    var elm = $("#player"),
        top = parseInt(elm.css('top')),
        left = parseInt(elm.css('left'));

    switch(e.which) {
        case 37:
            elm.css("left", left-2);
        break;
        case 38:
            elm.css("top", top-2);
        break;
        case 39:
            elm.css("left", left+2);
        break;
        case 40:
            elm.css("top", top+2);
        break;
    }
});

​FIDDLE