Mouseenter事件發生兩次懸停並且還發射了mouseleave代碼？

我想淡入淡出使用mouseenter和mouseleave的一些圖標，但我注意到我的代碼沒有工作得那麼好。我添加了一些控制檯日誌到我的代碼，並注意到mouseenter我的mouseleave日誌也被稱爲。任何人都可以解釋我做錯了什麼？Mouseenter事件發生兩次懸停並且還發射了mouseleave代碼？

JS問題的提示：http://jsfiddle.net/BndxN/1 當我將鼠標懸停在菜單上時，圖標出現在按鈕下方？

/* On sharePage hover hide label and display social icons */ 
$sharePage.mouseenter(function(){ 
    $sharePageLabel.fadeOut(function(){ 
     $socialIconItems.each(function(i){ 
      $(this).delay(i*45).stop(true,true).fadeIn(); 
      //console.log($(this)); 
     }); 
    }); 
}); 
$sharePage.mouseleave(function() { 
    $($socialIconItems.get().reverse()).each(function(i){ 
     $(this).delay(i*305).fadeOut(); 
     if(i==3){$sharePageLabel.fadeIn()} 
    }); 
});

HTML

<div id="sharePage"> 
     <h3>Pass The Party On</h3> 
     <ul id="socialIcons" class="cf"> 
     <li><a href="" class="fb ir" data-network="facebook" data-shareurl="">Facebook</a></li> 
     <li><a href="" class="twitter ir" data-network="twitter" data-shareurl="">Twitter</a></li> 
     <li><a href="" class="googlePlus ir" data-network="google" data-shareurl="">Google+</a></li> 
     <li><a href="" class="email ir" data-network="email" data-shareurl="">Email</a></li> 
     </ul> 
    </div>

來源

2012-11-30 styler

您似乎在代碼末尾缺少一組'}）;'。 – Cerbrus

對不起，在代碼中粘貼時錯過了他們 – styler

你可以顯示HTML嗎？可能是一個事件冒泡發生在這裏... –

你的圖標淡出沒有被觸發，因爲它是從MouseEnter事件尚未完成褪色英寸在淡出動畫上添加一個超時（在timein期間）似乎可以解決它。

見jsfiddle.net/BndxN/26/

編輯 - 您可能需要調整超時持續時間一點點。

來源

2012-11-30 16:06:20

太棒了！此代碼是否也適用於平板電腦，或者我必須添加點擊事件？ – styler

這將需要點擊...觸摸屏設備不適合懸停:) –

Mouseenter事件發生兩次懸停並且還發射了mouseleave代碼？

回答

相關問題