如何使用JQuery将动画内容从悬停移回到正常位置 [英] How to move the animated contents back to normal position off hover, using JQuery

问题描述

我有一个水平菜单，我想给效果悬停"时向左移动20px，然后移回悬停"时的相同位置.我想知道如何使用JQuery将其移回悬停"位置.你们能帮我这个忙吗?这是我的代码.

I have a horizontal menu and I want to give the effect move 20px left "on hover" and move back to the same position "off hover". I want to know how to move it back "off hover" using JQuery. Could you guys help me out regarding this? here is my code.

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>

推荐答案

.hover() 将得到完成的工作.

.hover() will get the job done.

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

演示

这篇关于如何使用JQuery将动画内容从悬停移回到正常位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！