Is it possible to move an element upon keydown using JQuery?
<p>How can I move an element horizontally by 10pixels  upon an arrow keydown event in JQuery? For instance I have </p>

<pre><code>  &lt;p class="move"&gt;This is to be moved&lt;/p&gt;
</code></pre>

<p>I have tried the following code but it does not work..</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;JQuery(2)&lt;/title&gt;
&lt;style type="text/css"&gt;
.Test1{width:100px;}
&lt;/style&gt;
&lt;script type="text/javascript"  src="jquery.js"&gt;  &lt;/script&gt;
&lt;script type="text/javascript"&gt;

$(document).ready(function() {


$('#target').keydown(function() {
  alert('Handler for .keydown() called.');
});

});
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;


&lt;div id="parent"&gt;
&lt;p id="target"&gt;This is a text&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The above was supposed to alert me upon a keydown event but it does not..How can I fix this?In other words it does not capture my keydown event..</p>
