JQuery issue in Google Chrome

Question

I'm trying to recreate the effect that I saw on another website, and although it seems that it works mostly, I have no problems in Google Chrome. The effect is when you hover over an image with thumbnails of images, it contains 3 icons that refer to various parameters.

A problem occurs in Chrome when there are more thumbnails than can be seen in one window. You hover over them in a window without any problems. Although if you scroll down to those that were not initially visible in the window, there seems to be an error that blocks the animation. It works fine if you move slowly, but faster movements seem to pause the animation on the same thumbnail (you don’t need to move it so fast to repeat it, I tried it on three different machines). If you hover over the ones that were visible, everything works fine. If I maximize the window so that they are all visible, then again this is normal.

Works well in IE9 and FF4 on all thumbnails, regardless of window size. I was messing around with .stop, changing the true, false parameters, but that doesn't seem to have much effect. These are my first attempts to use jquery, besides using pre-written scripts, any help is appreciated. From the search, I saw that others have problems with Chrome, although nothing concrete was possible.

http://kineticcomplex.com/jquerytest.html

Answer 1

This works in Chrome12 for me. In the past, I had several problems with hover() in Chrome (and position() ). I read that Webkit is too fast. Perhaps this is what is happening here? However, I could not understand what the problem was with hover (). However, using a different strategy seems to be better in Chrome. I changed the class to the actual <img> and not to the external <div> , otherwise the animation started in the empty space around the images, and I moved the background shadow before the animation to make the selection faster, i.e. no need to wait for the animation to start.

Edit: This may be a floating point error in Chrome. If you replace the float:left style with .et_pt_gallery_entry with display:inline-block , then hover () works. In any case, I left the updated hover () code below, as it is a bit cleaner. I try to avoid the float whenever possible. Over the years there have been many problems with floating elements! Hope this fixes this 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); }); }); 

Answer 2

Have you tried using various mouse events like mouseenter / leave or mouseover / out?