jQuery悬停状态在导航菜单上保持闪烁

Question

我目前在导航菜单上有一个动态生成的叠加层，但是当我将鼠标悬停在当前活动的悬停状态上时，它会一直闪烁。我知道这与我的jQuery有关，我认为每次移动鼠标时都是新的悬停。我尝试过在这里使用多个解决方案（添加fadeIn（）/ fadeOut（））给我的stop（）方法添加'true，true'，但它不起作用。

的jsfiddle是在这里：http://jsfiddle.net/5SUwp/

HTML：

<ul class="group" id="example"> 
     <li class="current_page_item"> 
      <a href="#">Home</a> 
     </li> 
     <li><a href="#">Buy Tickets</a></li> 
     <li><a href="#">Group Sales</a></li> 
     <li><a href="#">Reviews</a></li> 
     <li><a href="#">The Show</a></li> 
     <li><a href="#">Videos</a></li> 
     <li><a href="#">Photos</a></li> 
     <li><a href="#">Magic Shop</a></li> 
    </ul> 

</div> 

CSS：

#example { 
margin: 0 auto; 
list-style: none; 
position: relative; 
width: 960px; 
} 
#example li { 
display: inline-block; 
} 
#example a { 
color: #bbb; 
font-size: 14px; 
float: left; 
padding: 6px 10px 4px 10px; 
text-decoration: none; 
text-transform: uppercase; 
    } 
#example a:hover { 
color: white; 
} 

#example li#magic-box { 

position: absolute; 
bottom: 0; 
left: 0; 
width: 100px; 
height: 29px; 
background: #fe4902; 
opacity: .3; 
border-top: solid 3px #00ff00; 
} 

#example li:#magic-box:hover { 
display:inline-block; 
} 

的jQuery：

$(function() { 

var $el, leftPos, newWidth; 
    $mainNav2 = $("#example-two"); 

$("#example").prepend("<li id='magic-box'></li>"); 

var $magicBox = $("#magic-box"); 

$magicBox 
    .width($(".current_page_item").width()) 
    .css("left", $(".current_page_item a").position().left, "borderTop", "3px") 
    .data("origLeft", $magicBox.position().left) 
    .data("origWidth", $magicBox.width()); 


    $("#example li").find("a").hover(function() { 
    $el = $(this); 
    leftPos = $el.position().left; 
    newWidth = $el.parent().width(); 

    $magicBox.stop(true,true).animate({left: leftPos, width: newWidth}).show(); 


}, 
function() { 
    $magicBox.fadeOut().hide(); 

    }); 
}); 

Answer 1

的闪烁主要是因为.fad的eOut（）。hide（）调用。尝试删除它，看看它是否按预期工作。