Pourquoi mon effet de survol n'anime pas?

Question

Je suis sûr à 100% que je me suis perdu avec les sélecteurs jQuery. Mon effet de survol est hors service.

Voici ma structure:

<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> 

et voici le jQuery qui devrait faire l'animation:

$(".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"); 
}); 

et celui-ci est le 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; 
} 

Qu'est-ce que Je fais mal ici?

Answer 1

I simplifié votre code CSS mais, fondamentalement, vous avez besoin de changer le opacity-1 pas show

Link to fiddle

Notez le changement css de display: none =>opacity: 0

Answer 2

Ici, vous allez

http://jsfiddle.net/xygHB/

Variation

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; 
} 

Variation 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"); 
});