ホバー効果がアニメーション化されないのはなぜですか？

Question

私は100％確信しています。私はjQueryセレクタに迷っています。私のホバー効果は順不同です。ここで

は私の構造体である：

<div class="main"> 
    <div class="header"> 
    <div class="header_resize"> 
     <div class="menu_nav"> 
     <ul> 
      <li class="active"> 
      <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Default.aspx">Start Page</asp:HyperLink> 
      <em>Animate this text</em> 
      </li> 
      <li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

、ここでは、jQueryのアニメーションを行うべきであるということです。

$(".menu_nav ul li a").hover(function() { 
    $(this).next("em").animate({ opacity: "show", top: "-75" }, "slow"); 
}, function() { 
    $(this).next("em").animate({ opacity: "hide", top: "-85" }, "fast"); 
}); 

とこれは、CSSです：

.menu_nav ul li em { 
    background: url(images/hover.png) no-repeat; 
    width: 180px; 
    height: 45px; 
    position: absolute; 
    top: -85px; 
    left: -15px; 
    text-align: center; 
    padding: 20px 12px 10px; 
    font-style: normal; 
    z-index: 2; 
    display: none; 
} 

何午前私はここで間違っている？

Answer 1

私はあなたのCSSを簡略化しますが、基本的に、あなたは

http://jsfiddle.net/xygHB/を行くopacity

Link to fiddle

showない 1への注意を変更するにはここで display: none => opacity: 0

Answer 2

からCSSの変更を必要とします

CSSの変更

.menu_nav ul li em { 
    background: url(images/hover.png) no-repeat; 
    width: 180px; 
    height: 45px; 
    top: -85px; 
    left: -15px; 
    text-align: center; 
    padding: 20px 12px 10px; 
    font-style: normal; 
    z-index: 2; 
    opacity:0; 
} 

jsのの変更

$(".menu_nav ul li a").hover(function() { 
    $(this).next("em").animate({ opacity: 1, top: "-75px" }, "slow"); 
}, function() { 
    $(this).next("em").animate({ opacity: 0, top: "-85px" }, "fast"); 
});