jQuery : small weird prob. on event keydown simultaneous
<p>Not much good in jQuery/javascript but trying to create a small game.</p>

<p>here is the jsfiddle link: <a href="http://jsfiddle.net/zDer5/" rel="nofollow">http://jsfiddle.net/zDer5/</a>  </p>

<p>I am trying to move img all around the div. I am SUCCESSFULLY able to move it in all the direction and also diagonally by holding an arrow key or two for diagonal move.</p>

<p>But the problem is , if i hold right arrow key to move right and in between if i press up key to move diagonally up AND NOW if i release the up key ( still holding the right arrow key ) ... the movement STOP, where i expected it to move right.</p>

<p>It happen in all the cases .. holding left,press up and release up ... movement STOP.</p>

<p>SECOND: the image halt for second once i change the direction. any guide for smooth movement.</p>

<p>Thank YOU</p>

<p>here is the jsfiddle link: <a href="http://jsfiddle.net/zDer5/" rel="nofollow">http://jsfiddle.net/zDer5/</a></p>

<p>i am also pasting the same code here</p>

<pre><code>    var keys = {};

$('body').keydown(function(event){

    keys[event.which] = true;
    moveDot();
});

$(document).keyup(function (event) {
    delete keys[event.which];
    moveDot();
});

function moveDot(){


            var html = '';
                for (var i in keys) {
                    if (!keys.hasOwnProperty(i)) continue;
                        html += '&lt;p&gt;' + i + '&lt;/p&gt;';

                   if(i == '37'){
                        var left = $('#dot').css("left");
                        left = parseInt(left.match(/\d+/));
                        left = left-3;
                        $('#dot').css({ 'left': left + 'px' });
                    }
                   if(i == '38'){
                        var top = $('#dot').css("top");
                        top = parseInt(top.match(/\d+/)); 
                        top = top-3;
                        $('#dot').css({ 'top': top + 'px' });
                   }
                   if(i == '39'){
                      var left2 = $('#dot').css("left");
                        left2 = parseInt(left2.match(/\d+/)); 
                        left2 = left2+3;
                        $('#dot').css({ 'left': left2 + 'px' });
                    }
                    if(i == '40'){
                        var top2 = $('#dot').css("top");
                        top2 = parseInt(top2.match(/\d+/)); 
                        top2 = top2+3;
                        $('#dot').css({ 'top': top2 + 'px' });
                    }     

                }
                $('#out').html(html);
 }

&lt;div id="game-panel"&gt;
     &lt;img src="http://203.157.202.2/photos2009/Pic/thumbnails/black_dot_400x400.jpg" id="dot" /&gt;
&lt;/div&gt;

#game-panel{ position: relative; border: 2px solid #ccc; height: 200px; }
    #game-panel img{ position:absolute; }
    #dot{ left:100px; top:100px; }
</code></pre>
