Javascript 鼠标和鼠标闪动

当我用鼠标触摸盒子时，它会变得清晰可见，但即使我的鼠标停留在盒子上，它也会不断地变暗，我做错了什么

jQuery

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

在

.fadeIn

和

之前添加.fadeOut

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

演示：

它会闪烁，因为未完成之前的动画时，动画已排队。为了防止这种行为，设计了一个，您可以使用它来清除所有排队的动画

来自jQuery文档的报价

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

---

.mouseenter和.mouseleave并不是处理查询中悬停事件的最强大的方法。尝试使用.hover（）函数，该函数包含两个函数，第一个在鼠标进入元素时运行，另一个在鼠标离开时运行

您根本不需要

each（）

。
使用

.hover（）

（在这种特定情况下）
使用

.stop（）

清除每个新事件上以前的动画积累。
使用

.fadeToggle（）

（与.hover（）结合使用）

---

另外，我不确定您的

$（“.infoBox”）

选择器是否足够具体，因为它是所有

.infoBox

元素的集合，如果您只需要为一个特定元素设置动画，您需要查看一些其他DOM遍历方法，如

.find（）

，您需要为此设置一个，所以我们可以看到这个问题，但很可能你的鼠标指针在信息框淡入后会出现在信息框上，这会再次触发淡出，一旦信息框消失，鼠标就会回到geoThumb上，一切又重新开始，这会使它闪烁。好的，我想你刚刚回答了我的问题，谢谢！悬停与

mouseenter

和

mouseleave

组合相同。这只是一个伪事件。@PSL，我知道，但是.hover（）要多得多succinct@ColinMcGrath你为什么这么认为。这是一样的。。。。OP所做的和使用悬停没有什么不同。OP也可以只执行（'mouseenter mouseleave'，function（）{$（“.infoBox”）.fadeToggle（500）；}）框完全不会随着时间而褪色this@rob.m-有个打字错误。固定的。

geoThumb = $(".geoThumb");

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