Its not going down or left it goes right with the left key and the right isn't working why?


#1


$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
			// Left arrow key pressed
			case 37:
				$('img').animate({left: "+=10px"}, 'fast');
				break;
			// Up Arrow Pressed
			case 38:
			$('img').animate({top: "-=10px"}, 'fast');
				break;
			// Right Arrow Pressed
			case 39:
				$('img').animate({right: "+=10px"}, 'fast');
				break;
			// Down Arrow Pressed
			case 40:
				$('img').animate({down: "+=10px"}, 'fast');
				break;
		}
	});
});


#2

.animate() does not expect a right or down property.. Only left and top. Everything is relative to top, left. "down" is not a property in any CSS to my knowledge. Remember, jQuery is heavily invested in CSS.

Now let's get back to the arrow keys. The left arrow would indicate user direction, left. That usually means minus on the number line. left: "-=10px"

'Up' in CSS terms is top: minus, which agrees with the OP code.

The value on the right arrow key is correct, but it should be relative to the left edge of its parent viewport.

As alluded earlier, downward is plus on the top property.

.animate({top: "+=10px"})

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.