jQuery 호버 상태가 탐색 메뉴에서 계속 깜박임

Question

현재 탐색 메뉴에 동적으로 생성 된 오버레이가 있습니다. 그러나 현재 활성 호버 상태에 마우스를 올리면 깜박임이 계속 유지됩니다. 이 문제는 jQuery가 마우스를 움직일 때마다 새로운 마우스를 가져 왔다고 생각하는 것과 관련이 있다는 것을 알고 있습니다. 나는 여러 가지 솔루션을 사용하여 여기 (fadeIn()/fadeOut() 추가) '사실,'내 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(); 

    }); 
}); 

Answer 1

깜박이는 주로 때문에 .fad이다 eOut(). hide() 호출. 제거하고 예상대로 작동하는지 확인하십시오.