JQuery hover toggle fix

Question

I have a product grid that will switch to a div on each individual hover using the image / add to cart button. However, every time I wind things quickly, they all flash a little.

Here is a demo

Is there a better jQuery way to switch a single grid element of the corresponding hover div without flash?

Answer 1

Just add $.stop() to prevent the sequence of animation:

 $(".grid li").hoverIntent( function(){ $(".grid-hover", this).stop().delay(500).fadeIn(); }, function(){ $(".grid-hover", this).stop().fadeOut(); } ); 

It is a little difficult to achieve this, but I believe in this case $.hoverIntent() may be a better tool to use than the native $.hover() .

Answer 2

This seems a bit closer to a more comfortable user interface feel:

 $(document).ready(function() { $('.grid li').hover(function(){ $('.grid-hover').stop(); $('.grid-hover').fadeOut(500); $('.grid-hover', this).fadeIn(500); }, function(){ $('.grid-hover', this).fadeOut(500); }); }); 

Not perfect .. of course. The on hover jquery event is hard to do right; especially with animation. It is necessary to carefully monitor the logic and timing of things. I would play with the .stop() jQuery function, which stops the animation on the elements; as well as the JavaScript function setTimeout() .