jquery - jQuery 悬停切换修复

Question

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

这是一个演示

有没有更好的 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 函数。