jQuery hover and active state
<p>I'm having some problems trying to make the hover and active state work on my website. I'm new to jQuery and I'm finding it difficult. 
This is the code that I currently have:</p>

<pre><code>$(document).ready(function(){
   $('.st_tab').hover(function(){
   $(this).stop().animate({opacity : '0', left: '+=50',}, 100);
   }, function(){$(this).stop().animate({'opacity' : '1'}, 500);})

});
</code></pre>

<p>I want it to work like this example : <a href="http://www.queness.com/resources/html/fadein/index.html" rel="nofollow">http://www.queness.com/resources/html/fadein/index.html</a></p>

<p>I created a test page of site and you can see it here: <a href="http://jm-ai.com/test/index.html" rel="nofollow">http://jm-ai.com/test/index.html</a></p>

<p>I'm using a sprite image for the normal, hover, and active state.</p>

<p>The problem is that whenever I hover the animation disappears too quickly and when I click there is no animation.</p>
