javascript - Mouseenter和mouseleave闪烁

当我用鼠标遮盖时，该框变得可见，但是即使我的鼠标停留在该框上，它也会不断地在打开和关闭，我在做什么错？

jQuery的

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

最佳答案

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

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

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

闪烁是因为动画在动画尚未完成时排队。为避免这种现象，设计了.stop，您可以使用它来清除所有排队的动画。


  引用jQuery Docs
  
  当需要在mouseenter和mouseleave上设置元素动画时，.stop（）方法的有用性显而易见。

关于javascript - Mouseenter和mouseleave闪烁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20556252/