[jQuery] Jquery hover and .animate(opacity)

[jQuery] Jquery hover and .animate(opacity)


Hello, I am having some problems with a hover state function. I have
an unordered list, with images, and have a tooltip type javascript
function on the hoverstate, the tooltip is displayed directly on top
of the image. The content of the tooltip is inside an <em> tag, which
is hidden via the CSS. The tooltip pops up on a hover state using an
animating opacity. The problem that I am having is that once the popup
is displayed, the hoverstate turns off, as the mouse is now considered
hovering over the <em> and the tooltip dissipates.
To see an example of this shift, please take a look at:
http://heimmade.com/index.php?c=12 and try hovering over the thumbnail
images at the bottom of the page.
Thanks!
below is the code....
====================
JQUERY>>>>>>>>>>>>
====================
<script type="text/javascript">
$(document).ready(function(){
    $("#movers-row a").hover(
    function(over) {
        $(this).next("em.hover").animate({opacity: "show", top: "45"},
"slow");
    },
    function(out) {
        $(this).next("em.hover").animate({opacity: "hide", top: "50"},
"slow");
    });
});
</script>.
====================
<<<<<<<<<<<<JQUERY
====================
====================
HTML>>>>>>>>>>>>>>
====================
<ul id="movers-row">
<li class='thumbnail'>
<a href='# 1'><img src="images/product/
2ebb87483823eda8cd920ef0273bd3d0.jpg" alt='' /></a>
<em class='hover'>grass roots</em>
</li>
<li class='thumbnail'>
<a href='# 2' ><img src="images/product/
dbd1538fd3f3b6169c1bdca40011f4ac.jpg" alt='' /></a>
<em class='hover'>grin and bare it</em>
</li>
</ul>
====================
<<<<<<<<<<<<<<<HTML
====================