淡入淡出另一个徘徊的时候，不能正常工作元素

我有这样的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>

它工作正常，但问题是，如果鼠标进出的移动#menu牛逼很多次他超时1秒到期，然后#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>

来源

2014-01-05 Gas li

在http://jsfiddle.net/到小提琴的链接将是非常有益的 – 2pha

你可以取消绑定事件，当它完成了重新绑定？ –

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

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

来源

2014-01-05 11:07:32

谢谢，在.fadeIn之前添加.stop（），但创建另一个，下一次我悬停#menu #mask加载的透明度较低，最后是无法入侵的，我需要重新加载页面以使fadeIn工作再次，你的解决方案是接近，但需要更多... –

已解决！用.stop工作一下你的想法，我添加了“不透明度”，“0”。6“，所以面具总是返回正确的不透明度，代码如下： –

之前执行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小提琴：http://jsfiddle.net/nMN62/

来源

2014-01-05 11:06:23

谢谢，但它没有工作！ –

@Gasli现在看看它，因为面具显示在菜单上。 –

@Gasli如果你调整它的工作元素的'z-index'和'position'。请参阅：http://jsfiddle.net/nMN62/ –

使用.stop()为了防止这个问题就停止当前的动画。代码如下。

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

来源

2015-09-03 10:12:47

淡入淡出另一个徘徊的时候，不能正常工作元素

回答

相关问题