Comment ajouter un effet de survol à un menu en utilisant jQuery

Question

J'ai le menu principal sur la page this, implémenté sous forme de liste (UL avec ID "top-nav").

Je me suis battue avec et j'ai essayé de comprendre comment ajouter un effet de fondu entrant/sortant en utilisant jQuery lorsque l'utilisateur survole dessus. Ainsi, au lieu que l'image d'arrière-plan change instantanément, elle disparaîtrait lentement.

Voici le HTML:

<ul id="top-nav" class="flatList"> 
    <li> 
     <a href="#"> 
     <span class="embed embed-top-nav">Home</span> 
     <p>site home, news, highlights</p> 
     </a> 
    </li> 
    <li><a href="#" class="embed embed-top-nav" >Watch UNC-TV</a></li> 
    <li><a href="#" class="embed embed-top-nav">Learn</a></li> 
    <li><a href="#" class="embed embed-top-nav">Support Us</a></li> 
    <li><a href="#" class="embed embed-top-nav" id="nav-last">Contact</a></li> 
</ul> 

Et voici le CSS qui gère la liste et le vol stationnaire de balises d'ancrage en ce moment:

ul#top-nav { 
    top:71px; 
    margin-left:196px; 
    position:absolute; 
    width:659px; 
    min-width:650px; 
} 
ul#top-nav li, ul#top-nav li a{ 
    width:131px; 
    height:50px; 
    float:left; 
    border: 0px solid white; 
} 
ul#top-nav li a:link, ul#top-nav li a:visited { 
    text-decoration:none; 
    color: #2C6286; 
    background: transparent url(../img/nav-button.png) no-repeat 0 11px; 
    border: 0px solid green; 
    padding-top:9px; 
    padding-left:14px; 
    padding-top:9px; 
    z-index:100000; 
} 
ul#top-nav li a:hover { 
    background: transparent url(../img/nav-button.png) no-repeat 0 -45px; 
} 
ul#top-nav li .embed-top-nav { 
    font-size:25px  
} 
ul#top-nav li p { 
    position:absolute; 
    top:37px; 
    width:109px; 
    font-size:8px;  
    color:#666; 
    cursor:pointer; 
} 
a:link#nav-last, a:visited#nav-last { 
    background: transparent !important; 
} 
a:hover#nav-last { 
    background: transparent url(../img/nav-button.png) no-repeat 0 -45px !important; 
} 

Merci.

Answer 1

Essayez:

$('#top-nav').hover(function(){ 
    $('#element_id').fadeIn('slow'); 
}, function(){ 
    $('#element_id').fadeOut('slow'); 
}); 

Où top-nav est l'id de l'élément qui est plané et element_id est l'id de l'élément que vous voulez fade in/out.

Fondamentalement, la méthode hover nécessite deux fonctions; le premier est exécuté lorsque la souris entre dans l'élément tandis que le second est exécuté lorsque la souris le quitte.

Plus d'info:

• http://api.jquery.com/hover/