鼠标和鼠标闪烁

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，您可以使用它清除所有排队动画。

引用jQuery文档 当我们需要在mouseenter和mouseleave上动画一个元素时，.stop()方法的有用性是显而易见的。

Answer 2

.mouseenter和.mouseleave不是处理查询中悬停事件的最强大方法。尝试使用.hover()，它包含两个函数，第一个函数在鼠标进入元素时运行，一个函数在离开元素时运行。http://api.jquery.com/hover/

Answer 3

你根本不需要each()。

使用.hover() (在本例中)

使用.stop()清除以前在每个新事件上生成的动画。

使用.fadeToggle() (与.hover()相结合)

geoThumb = $(".geoThumb");

geoThumb.hover(function() {
     $(".infoBox").stop().fadeToggle();
});

此外，我也不确定$(".infoBox")选择器是否足够具体，因为它是all .infobox元素的集合，如果只需要动画一个特定元素，则需要查看一些其他DOM遍历方法，如.find()