Question

I have a grid of products that on each individual hover, will toggle-in a div with the image/add to cart button. However, every time I hover over the items quickly, they all somewhat flash.

Here is a demo

Is there a better jQuery way to toggle the individual grid item’s respective hover div without the flash?

Answer 1

Just add in $.stop() to prevent it from queueing up more animations:

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

It’s a bit difficult to get this perfect, however I believe in this instance $.hoverIntent() may be a better tool to use than the native $.hover().