CODEWITHSUNDEEP
javascriptjqueryanimation
11684
11684

Reputation: 7507

jquery position changing with .css() behaving strange

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.

Upvotes: 0

Views: 93

Answers (2)

adeneo
adeneo

Reputation: 318182

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

Upvotes: 0

MikeTheReader
MikeTheReader

Reputation: 4190

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.

Upvotes: 2

Related Questions