我有這樣的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>
在http://jsfiddle.net/到小提琴的鏈接將是非常有益的 – 2pha
你可以取消綁定事件,當它完成了重新綁定? –