How To Move An Element (with arrow keys) Consistently???
I have a DIV set up to move whenever I press an Arrow Key. It moves fine with one push, by holding the arrows is a little messed up. When I hold an Arrow Keys, the DIV moves in one increment THEN it continues to move, as I hold the Arrow Key.
How do I get rid of the first increment? I want the DIV to move consistently when I hold an Arrow Key. Here is my JavaScript code:
$(document).keydown(function(e){
switch (e.which){
case 37: //left arrow key
$(".ball").finish().animate({
left: "-=20"
});
break;
case 38: //up arrow key
$(".ball").finish().animate({
top: "-=20"
});
break;
case 39: //right arrow key
$(".ball").finish().animate({
left: "+=20"
});
break;
case 40: //bottom arrow key
$(".ball").finish().animate({
top: "+=20"
});
break;
}
});