jQuery snap to grid

Hi,

I'm having a little problem with my jQuery.
This is my code:
<script>
$(document).ready(function(){
$(this).stop(true,false).keypress(function(event) {
keypressed()
});

function keypressed(){
var key = (event.keyCode);
if (key == 39){
$('.megaman').empty();
$('.megaman').html('<img src="new.gif"/>');
$('.megaman').stop(true,false).animate({
left: '+=12',
}, 10, function() {
$('.megaman').empty();
$('.megaman').html('<img src="new.gif"/>');
});
}

}
});
</script>

Basically, when a key is pressed the image will move across the screen, I would like it so that when it moves it snaps to a 20x20 grid.

How would I be able to do this?

Thanks.