[jQuery] show/hide opacity gets stuck sometimes

[Tijmen Smit]

I'm working on a page where once you hover over a small photo, a
bigger photo should appear underneath it with a small text. The box
holding the photo does appear, and once you slowly move towards
another photo it works fine.

But once you quickly move from the top left to the top right, it get a
bit weird. Sometimes the box with the big photo disappears completely
or it get stuck with the opacity not set to full visibility.

And in IE7 there's another thing going on, the moment you place your
mouse on the small photo it first seems to be disappearing, but it
later does come up the way its supposed to be. I did set the z-index
on both of the div's, but I have the feeling it doesn't have anything
to do with the z-index.

You can see it in action here -> 
http://www.tijmensmit.com/dev/intranet/test.html

$("#smoelenboek li").hover(function() {
            var $list_class = $(this).attr("class");
            $("#smoelenboek").find('li.' + $list_class).addClass
("on");
            $(this).find("div").stop().animate({opacity: "show", top:
"30px"}, "slow");
        }, function () {
            $(this).find("div").stop().animate({opacity: "hide", top:
"20px"}, "fast");
            $("#smoelenboek li").removeClass("on");
});

I know I could change the .stop().animate() to a simple .hide()/.show
(), which works fine. But I would like to keep the animate & opacity
effect, but then without them sometimes disappearing :)

Any idea's how to fix this problem?

Thanks!
Tijmen