2

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

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();

     });
 });
4

1 回答 1

1

闪烁主要是因为 .fadeOut().hide() 调用。尝试删除它，看看它是否按预期工作。

于 2013-09-25T21:00:23.710 回答