jQuery悬停Toggle修复

Question

我有一个产品网格，每个单独悬停，将切换 - 在div与图像/添加到购物车按钮。但是，每次我快速悬停在物品上时，它们都会有些闪光。

这里是一个demo

有没有更好的jQuery的方式来切换单独的网格项目的各悬停div不使用闪光灯？

Answer 1

在$.stop()只需添加，以防止其排队多个动画：

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

这是一个有点难以得到这种完美的，但是我相信在这种情况下$.hoverIntent()可能是一个更好的工具比本地使用$.hover()。

Answer 2

这似乎有点近到一个更为舒适的感觉UI体验：

$(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); 

    }); 

}); 

不完美的..可以肯定的。关于悬停jquery事件很难得到正确的;尤其是动画。必须认真遵循事物的逻辑和时间安排。我会玩.stop() jQuery函数，它会停止元素上的动画;以及setTimeout() JavaScript函数。