Question

我有这个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

和CSS：

#mask {
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:130;
    background-color:rgba(10,10,10, 0.6);
    display: none;
}

我希望#mask在#menu悬停时显示淡入淡出，然后使用以下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>

它运行正常，但问题是，如果鼠标在1秒的超时到期之前多次移入和移出#menu，那么#mask会保持淡入淡出鼠标移动的次数超出和退出菜单...我需要代码中的某些东西在第一次触发后停止触发悬停动作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>

Answer 1

在执行fadeIn或fadeOut之前检查#mask当前是否为animated。

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

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

JS Fiddle ：http://jsfiddle.net/nMN62/

Answer 2

听起来jQuery动画正在排队并继续执行。您应该在执行.stop()之前尝试使用.fadeIn()方法，以便终止旧动画。

http://api.jquery.com/stop/

Answer 3

只需使用.stop()停止此问题即可停止当前动画。代码如下。

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

fadeIn fadeOut元素悬停在另一个时，不能正常工作

3 个答案: