Q:

Jquery keypress/down and animate

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/

A:

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.

