Question

I am trying to make a div move left and right but my animate seems to be ignored…any ideas what I’m doing wrong?

JS:

$(document).ready(function(){            
    $(document).keydown(function (e) {
        var keyCode = e.keyCode || e.which,
        arrow = {left: 37, up: 38, right: 39, down: 40 };

        switch (keyCode) {

            case arrow.left: 
                $('#block').animate({"left": "-=1px"}, "slow");
            break;

            case arrow.right: 
                $('#block').animate({"left": "+=1px"}, "slow");
            break;
        }
    });
});

CSS:

body{
    font-family:arial, verdana;
    color:#000;
    font-size:12px;
}

#block {
    width:50px;
    height:50px;
    border:1px solid #ff0000;
}

http://jsfiddle.net/AeWEc/

Answer 1

Make you #block as position:absolute or position: relative, that mean give some position properties.

#block {
    width:50px;
    height:50px;
    border:1px solid #ff0000;
    position:absolute
}

DEMO

Because, left in animation change the left CSS property of an element, and left property works for CSS position.