Roll over JQuery -move
<p>I have a simple button with an img. A double img: blue arrow at top, green arrow in bottom (hight 44px) . I cannot put the img in the background for different reasons. So I tried to put the img in the html and move it with jQuery. But it doesn't move. Anyone can help?
<a href="http://jsfiddle.net/uPd86/" rel="nofollow">http://jsfiddle.net/uPd86/</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="button"&gt;
  &lt;div id="text"&gt;boto&lt;/div&gt;
  &lt;div id="arrow"&gt;&lt;img src="http://www.mig-marketing.com/img/arrowDouble.png"&gt;&lt;/div&gt;
&lt;/div&gt;​
</code></pre>

<p>CSS:</p>

<pre><code>#button{
    position:absolute;
    top:20px;
    left:20px;
    width:45px;
    height: 15px;
    line-height: 15px;
    overflow:hidden;
}    

#text{
    position:absolute; 
}

#arrow{
    position:absolute;
    right:0px;
    width:15px;
    height:15px;
}​
</code></pre>

<p>JAVASCRIPT:</p>

<pre><code>$(function(){

    $("#button").hover(function() {
        $("#button #arrow").animate({top: "-22"}, 1200);
    });

})
</code></pre>

<p>​</p>
