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

我有這樣的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

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

回答

相關問題