Jquery 将另一个元素悬停时淡出淡出元素，工作不正常

我有这个HTML：

<div id="mask"></div>
<div id="menu">
    <ul>
        <li><a href"#"></a></li
        <li><a href"#"></a></li
        <li><a href"#"></a></li
    </ul>
</div

我希望#mask以淡入菜单悬停的方式出现，我使用以下jquery实现这一点：

<script type="text/javascript">
   $(function(){
     $('#menu').hover(over, out);
   });

   function over(event)
   {
     $('#mask').fadeIn(1000);
     $('#mask').css("display","block");
   }
   function out(event)
   {
     $('#mask').fadeOut(1000);
   }
 </script>

$（函数（）{
$（“#菜单”）。悬停（在上方，向外）；
});
功能结束（事件）
{
$（'面具'）.fadeIn（1000）；
$（'#mask'）.css（“显示”、“块”）；
}
功能输出（事件）
{
$（“#掩码”）。淡出（1000）；
}

它工作正常，但问题是，如果鼠标在1秒超时之前多次进出菜单，那么“遮罩”会在鼠标在菜单上来回移动的次数中保持淡入淡出…我需要代码中的某些内容在第一次触发后1秒内停止触发悬停动作

我希望你明白我的意思

多谢各位

---

解决了，使用.stop（）方法对Craig Riter的想法进行了一些研究。 在.fadeIn之前添加了一行

<script type="text/javascript">
$(function(){
    $('#menu-eng').hover(over, out);
});
function over(event)
{      
$('#mask').stop("opacity","0.9");       
$('#mask').fadeIn(1000);
$('#mask').css("display","block");
}
function out(event)
{      
$('#mask').fadeOut(1000);
}
</script>

$（函数（）{
$（“#菜单工程”）。悬停（在上方，向外）；
});
功能结束（事件）
{      
$（'#mask'）。停止（“不透明度”，“0.9”）；
$（'面具'）.fadeIn（1000）；
$（'#mask'）.css（“显示”、“块”）；
}
功能输出（事件）
{      
$（“#掩码”）。淡出（1000）；
}

在执行

fadeIn

或

fadeOut

之前，请检查

#mask

当前是否正在运行

---

jsfiddle：

听起来jQuery动画正在排队并继续执行。在执行

.fadeIn（）

之前，您应该考虑尝试使用

.stop（）

方法，以便可以终止旧动画

---

只需使用

.stop（）

停止当前动画即可防止此问题。代码如下所示

$("#mask").hover(function(){ 
    $(this).stop(true, true).fadeOut(100)
}, function(){
       $(this).stop(true, true).fadeIn(50)
});

---

如果在上添加一个小提琴的链接，将非常有帮助。您可以在事件结束时解除绑定并重新绑定？@Gasli现在查看它，这是因为遮罩显示在菜单上。@Gasli如果您调整它工作的元素的

z-index

和

位置

。请参阅：我不确定在

out（）

函数中检查

：动画

是否是一个好的计划，因为如果用户在元素仍在淡入时将鼠标移出，则不会再次淡出，除非再次移入和移出鼠标。是的，它可以工作，但存在NNN所说的问题，此外，有时即使鼠标不在#菜单中，遮罩也始终可见。谢谢，在此之前添加.stop（）。fadeIn解决了此问题，但创建了另一个问题，下次我悬停#菜单时，遮罩的不透明度会降低，最后不可见，我需要重新加载页面，以便fadeIn再次工作，您的解决方案已接近尾声，但需要更多解决方案！！！使用.stop稍微研究一下您的想法，我添加了“不透明度”、“0.6”，因此掩码总是以正确的不透明度返回，代码如下：$（function（）{$（'#menu eng'）。hover（over，out）；}）；函数覆盖（事件）{$（'#掩码'）。停止（“不透明度”，“0.9”）；$（'#掩码”）。fadeIn（1000）；$（'#掩码”）。css（“显示”，“块”）；}函数覆盖（事件）{$（'#掩码'）。fadeOut（1000）；}

    function over(event)
    {
        if(!$("#mask").is(":animated")){
         $('#mask').fadeIn(1000);
         $('#mask').css("display","block");
        }
    }

    function out(event)
    {
       if(!$("#mask").is(":animated")){
         $('#mask').fadeOut(1000);
       }
    }

$("#mask").hover(function(){ 
    $(this).stop(true, true).fadeOut(100)
}, function(){
       $(this).stop(true, true).fadeIn(50)
});