Question

当我鼠标移动时，盒子变得可见，但即使我的鼠标停留在盒子上它也会一直褪色，我做错了什么？

的jQuery

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

Answer 1

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

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

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

它会闪烁，因为动画在其前的动画未完成时排队。为防止出现这种情况，设计了.stop，您可以使用它来清除所有排队的动画。

来自jQuery Docs的引用

当我们需要在mouseenter和mouseleave上为元素设置动画时，.stop（）方法的用处很明显。

Answer 2

.mouseenter和.mouseleave不是处理查询中悬停事件的最有效方法。尝试使用带有2个函数的.hover（），第一个函数在鼠标进入元素时运行，一个函数在它离开时运行。 http://api.jquery.com/hover/

Answer 3

您根本不需要each() 使用.hover()（在此特定情况下）
使用.stop()清除每个新事件的上一个动画构建使用.fadeToggle()（与.hover（）结合使用）

geoThumb = $(".geoThumb");

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

此外，我不确定您对$(".infoBox")选择器是否具体，因为它是所有 .infobox元素的集合，如果您只需要设置动画效果您需要查看其他DOM 遍历方法的一个特定元素，例如.find()

Mouseenter和mouseleave闪烁

3 个答案: