jQuery的鼠標懸停菜單動畫

Question

我仍然有一個問題，以中心的背景圖像下面的鏈接，mouseleave不會完全返回到列表的中心，這裏需要一些幫助。謝謝！

這裏JsFiddle

---

我做一個簡單的菜單與下面的mouseover光標一個動畫，並返回到上mouseleave當前位置的列表。

我想在頁面加載時總是低於當前位置，所以如何使用margin 0 auto來計算此值？像這樣的example。

/*jQuery*/ 
$('li').mouseover(function() {  

    var top = $(this).offset().top + $(this).height() + 5; 
    var left = $(this).offset().left + ($(this).width()/2); 

    $('#marker').stop().animate({ top: top, left: left }, 200); 

}); 

$('li').mouseleave(function() { 

}); 

我希望一切都足夠清晰，爲您的幫助！

Answer 1

將課程添加到當前頁面。改變mouseleave。 Jsfiddle

HTML

<div id="menu-wrapper"> 
    <ul> 
     <li>Menu1</li> 
     <li class="currentpage">Menu2</li> 
     <li>Menu3</li>  
     <li>Menu4</li>  
     <li>Menu5</li>   

    </ul>  

    <div id="marker">*</div> 

</div> 

的Javascript

$('li').mouseleave(function() { 
    var top = $('.currentpage').offset().top + $(this).height() + 5; 
    var left = $('.currentpage').offset().left + ($(this).width()/2); 

    $('#marker').stop().animate({ top: top, left: left }, 200);  
});