Question

我有一个水平菜单，我想让效果在“悬停”时向左移动20px并移回“悬停”的相同位置。我想知道如何使用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

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

1 个答案: