Jquery 图像上的淡入淡出div无法保持显示

我有一堆图片，当我把鼠标移到其中一个上面时，我想让另一个div显示在其他每个上面，使它们“变暗”。它似乎在第一个图像中起作用，但在那之后，它有了自己的想法

以下是我一直在尝试的：

html:

JQuery：

$('.imggHolder').mouseenter(function() {
            $(this).find('.showOver').fadeIn();
            $('.darkOver').fadeIn(); // show all darkOver
            $(this).find('.darkOver').hide(); // hide 'this' darkOver
        });

        $('.imggHolder').mouseleave(function() {
            $(this).find('.showOver').fadeOut();
            $('.darkOver').fadeOut();
        });

有更好的方法吗

更新我认为现在发生的是fadeIn/FadeOut没有结束

---

这里有一个停止当前动画的命令，您可以使用悬停别名：

---

如果只针对要更改的元素（即同级元素），则会有所帮助。另外，请使用

.stop（）

防止对动画进行查询

$（'.imggHolder'）.mouseenter（函数（）{
$（this.find（'.shoover'）.fadeIn（）；
$（this）.sides（）.find（'.darkOver'）.stop（）.fadeIn（）；
});
$（'.imggHolder'）.mouseleave（函数（）{
$（this.find（'.shoover'）.fadeOut（）；
$（this.sides（）.find（'.darkOver'）.fadeOut（）；
});

---

更新 这个答案和@Beated's都有问题-如果你移动光标太快，我的解决方案会有问题，而@Beated's会使所有的覆盖层在图像之间来回闪烁。您可以通过移动到CSS转换来避免这两个问题，转换由一些简单的JS操纵的类更改触发。检查以下内容

css

.shovover，
darkOver先生{
不透明度：0；/*而不是显示：无*/
过渡：不透明度。5s缓解；
}
.可见{
不透明度：1；
}

js

$（'.imggHolder'）。悬停（函数（）{
$（this.find（'.shoover'）.addClass（“可见”）；
$（this）.sides（）.find（'.darkOver'）.addClass（“可见”）；
}，函数（）{
$（'.shoover，.darkOver'）.removeClass（“可见”）；
});

优点：流体硬件加速动画将自动处理过渡的开始/停止位置

---

缺点：IE9不支持（将退回到只显示/隐藏覆盖层而不设置过渡动画）

在图像之间快速移动鼠标，您将看到需要跳到animation@roasted感谢您的反馈，发布了一个替代方案。是的，很好的解决方案，但正如您所说，在旧浏览器中不受支持。

#hp_imgs {
width:66%;
float:right;
display:block;
}

.imggHolder {
width:31%;
float:left;
margin:1%;
position:relative;
cursor:pointer;
}

.showOver {
width:80%;
position:absolute;
bottom:20%;
left:10%;
height:30px;
background:rgba(255, 255, 255, .8);
padding-top:10px;
text-align:center;
display:none;
border-radius:6px;
}

.darkOver {
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
position:absolute;
top:0;
left:0;
display:none;
z-index:10;
}

#hp_imgs img {
float:right;
margin:2px;
border-radius:4px;
display: block;
max-width:100%;
width:auto;
height:auto;
}

$('.imggHolder').mouseenter(function() {
            $(this).find('.showOver').fadeIn();
            $('.darkOver').fadeIn(); // show all darkOver
            $(this).find('.darkOver').hide(); // hide 'this' darkOver
        });

        $('.imggHolder').mouseleave(function() {
            $(this).find('.showOver').fadeOut();
            $('.darkOver').fadeOut();
        });

$('.imggHolder').hover(function () {
    $(this).find('.showOver').stop(true,true).fadeIn();
    $('.darkOver').stop(true,true).fadeIn();
    $(this).find('.darkOver').hide();
}, function () {
    $(this).find('.showOver').stop(true,true).fadeOut();
    $('.darkOver').stop(true,true).fadeOut();
});