Jquery animate problem in Google Chrome

I've been trying to recreate an effect I saw on another website and while it looks like it mostly works I'm not having a problem in Google Chrome. The effect is when you hover over an image thumbnail it comes up with 3 icons which link to various options.

The problem comes in Chrome when there are more thumbnails than are visible in one window. You hover over the ones in the window without problem. Though if you scroll down to ones that weren't initially visible in the window there seems to be some bug that locks the animation up. It works fine if you开发者_如何学Python move slowly, but quicker movements seem to pause the animation on one thumbnail (you don't have to move that fast to replicate it, I've tried it on three different machines). If you hover back over the ones that were visible it works fine still. If I maximise the window so they are all visible then again it is fine.

Works fine in IE9 and FF4 on all the thumbnails regardless of window size. I've been messing around with .stop changing the true,false options but that doesn't seem to have much effect. This is my first attempts at using jquery other than using pre written scripts, any help is appreciated. From searching I've seen others having a problem with Chrome, though nothing concrete that has been able to help.

http://kineticcomplex.com/jquerytest.html

This is working in Chrome12 for me. I've had a few problems in the past with hover() in Chrome (and position() as well). I've read that Webkit is just too fast sometimes. Maybe that is what is happening here? I couldn't really see what the problem is with hover() in this case though. However using a different strategy seems to be better in Chrome. I changed the class to the actual <img>, rather than the outer <div> otherwise the animation was starting in the blank space around the images and I moved the background shadow before the animation to make the highlight quicker, i.e. not having to wait for the animation to start.

Edit: It might be a float bug in Chrome. If you replace the float:left style in the .et_pt_gallery_entry with display:inline-block then the hover() works. I've left the updated hover() code below anyway, since it is a bit cleaner. I try and avoid float whenever possible. Had many issues over the years with floating elements! Hope this fixes it for you.

$(function(){
    $('.et_pt_item_image').hover(function(){
        $('.zoom-icon, .more-icon, .map-icon', this).css({opacity:0, visibility:'visible'});
        $('img', this).css({backgroundColor:'#ddd', borderColor:'#bbb'},400);
        $('a.zoom-icon', this).stop().animate({opacity: 1, left: 40}, 400);
        $('a.more-icon', this).stop().animate({opacity: 1, left: 105}, 400);
        $('a.map-icon', this).stop().animate({opacity: 1, left: 170}, 400);
    }, function(){
        $('img', this).css({backgroundColor:'#fff', borderColor:'#e5e5e5'},400);
        $('a.zoom-icon', this).stop().animate({opacity: 0, left: 31}, 400);
        $('a.more-icon', this).stop().animate({opacity: 0, left: 105}, 400);
        $('a.map-icon', this).stop().animate({opacity: 0, left: 180}, 400);
    });
});

Have you tried using different mouse events, such as mouseenter/leave, or mouseover/out?