javascript - Mouseenter 和 mouseleave 闪烁

Question

当我用鼠标点击时，盒子变得可见，但即使我的鼠标停留在盒子上，它也会不断淡入淡出，我做错了什么？

jQuery

    geoThumb = $(".geoThumb");
    geoThumb.each(function(){
        $(this).mouseenter(function() {
            $(".infoBox").fadeIn(500);
        }).mouseleave(function(){
            $(".infoBox").fadeOut(500);     
        });
    });

Answer 1

添加.stop在 .fadeIn 和 .fadeOut 之前。

$(".geoThumb").mouseenter(function() {
    $(".infoBox").stop().fadeIn(500);
}).mouseleave(function(){
    $(".infoBox").stop().fadeOut(500);     
});

演示:http://jsfiddle.net/DerekL/R4F9T/

它闪烁是因为当它前面的动画没有完成时，动画正在排队。为防止这种行为，.stop是专门设计的，您可以使用它来清除所有排队的动画。

Quote from jQuery Docs

The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave.