jquery - jQuery 鼠标悬停菜单动画

Question

我仍然无法将链接下方的背景图像居中，mouseleave 不会完全返回到列表的中心，这里需要一些帮助。谢谢！

这里是JsFiddle

---

我正在做一个简单的菜单到一个列表中，动画跟随光标mouseover，并返回到当前位置mouseleave。

我希望在页面加载时始终低于当前位置，那么如何在边距为 0 的 div 中自动计算呢？像这个例子。

/*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

向当前页面添加一个类。更改鼠标离开。提琴手

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