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

Question

我有一个水平菜单，我想将效果向左移动 20px "on hover" 并移回相同位置 "off hover"。我想知道如何使用 JQuery 将其移回 "off hover"。你们能帮我解决这个问题吗？这是我的代码。

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

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

How to move the animated contents back to normal position off hover, using JQuery

html

javascript

css

jquery

hover