How to add hover effect to menu using jQuery

Question

Hi. I've got the top menu on this page, implemented as a list (UL with ID "top-nav"): http://bit.ly/dzVXB1

I've been wrestling with it and trying to figure out how to add a fade-in/fade-out effect using jQuery when the user hovers over it. So instead of the background image changing instantly, it would fade in slowly.

Here's the 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>

And here's the CSS that handles the list and anchor tags' hover right now:

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

Thank you.

Answer 1

Try:

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

Where top-nav is the id of the element which is hovered and element_id is the id of the element which you want to fade in/out.

Basically the hover method needs two functions; the first one is executed when mouse enters the element while second one is run when mouse leaves it.

More Info:

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