Hi again, I'm new to jQuery.

I have a great looking CSS drop menu working on this test site. With help I managed to get the sub-menu to slide out nicely, now to increase its spiffyness even further I want to animate the hover function on each link so it fades to the next image (which is actually part of the same image if you look closely) on mouseover.

Here's the image that I made for the links. The top 30px is visible by default then the background slides -30px on hover, -60px on click, -90px on active.



So how would I go about animating this? Here is my existing code:

1. $(document).ready(function() {
      
       $("body.home #glow").fadeIn("slow");  // fades in the homepage
      
       $("div#menu ul li").hover(function(){  // slides out the sub-menu
      $("ul", this).slideDown("fast");
      }, function(){
      $("ul", this).slideUp("fast");
       });
   
   });
   
   
   
   
   
   
   
   
   
   
   

Thanks for looking, RM.