javascript - 如何使用 JQuery 将动画内容移回悬停后的正常位置

Question

我有一个水平菜单，我想使效果在“悬停时”向左移动 20 像素，并在“悬停时”移回相同位置。我想知道如何使用 JQuery 将其移回“悬停状态”。你们能帮我解决这个问题吗？这是我的代码。

JQuery:

 $(document).ready(function () {
     $("div.menu li").OnMousehover(function () {
         $("li").animate({ left: '20px' });
     });
 });

ASP.NET:

<div>
<asp:Menu ID="Menu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
  <Items>
    <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1" />
    <asp:MenuItem NavigateUrl="~/Page2.aspx" Text="Page2" />
    <asp:MenuItem NavigateUrl="~/Page3.aspx" Text="Page3" />
    <asp:MenuItem NavigateUrl="~/Page4.aspx" Text="Page4" />
    <asp:MenuItem NavigateUrl="~/Page5.aspx" Text="Page5" />
  </Items>
</asp:Menu>
</div>

Answer 1

.hover()将完成工作。

$(document).ready(function (){
     $("ul.menu li").hover(
         function() {
             $(this).animate({ left: '-20px' });
         },
         function() {
             $(this).animate({ left: '0' });
         }
     );
});

Demo