jQuery Hover Toggle Fix

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

    });

});

不完美..可以肯定。 on hover jquery事件很难做到正确;特别是动画。必须仔细遵循事物的逻辑和时间。我会使用.stop() jQuery函数，它会停止元素上的动画;以及setTimeout() JavaScript函数。