jQuery on hover show image with animation
<p>I have two images in a <code>a</code> tag</p>

<pre><code>&lt;a&gt;
&lt;img src="blabla.jpg" class="VisibleImage" /&gt;
&lt;img src="lolo.jpg" class="HoverImage" /&gt;
&lt;/a&gt;
</code></pre>

<p>by default image which have class <code>VisibleImage</code> is visible and <code>HoverImage</code> is hidden, but when someone hover over <code>a</code> tag then <code>VisibleImage</code> is hidden and <code>HoverImage</code> will be visible.</p>

<p>I am using this css:</p>

<pre><code>a .VisibleImage{display:block}
a .HoverImage{display:none}

 //on hover
a:hover .VisibleImage{display:none}
a:hover .HoverImage{display:block}
</code></pre>

<p>But I want a animation like <code>Slide up</code>, I tried to use css3 but it did'nt worked.
I moved to jQuery and used jQuery <code>hover()</code> but I failed. 
Please give me jQuery code</p>
