How to put in fade effect with jQuery in sprite Navigation

I have a navigation that is made with sprites. It's almost perfect except the client wants a hover on and hover off effect on it. I used :hover for that but he would also like to have fadein effect with the sprites.

Here is the site I am currently working on.

I tried this bit:

  $("nav ul a").hover(function(){
  $(this).stop().fadeTo(300, 0.9);
}, function(){
    $(this).stop().fadeTo(300, 0.1);
}).fadeTo(0, 0.7);

But that makes the whole navigation transparent. Thats not really what I want. I did add a dark background underneath the nav but it still didn't look right. I can't think of no other way to do this.

Heres the CSS:

nav ul {  position: relative; z-index: 1000;  margin: -26px 0 0 11px; overflow: hidden; }
nav ul li { display: inline; }
nav ul li a { background: url(../images/nav-sprite.png); display: block; float: left; text-indent: -999px; margin: 0 auto; width: 667px; }    nav ul a#nav-1 { background-position: 0 0;  height: 48px; width: 103px; }
nav ul a#nav-2 { background-position: -103px 0;  height: 48px; width: 129px; }
nav ul a#nav-3 { backgr开发者_如何学编程ound-position: -234px 0;  height: 48px; width: 156px; }
nav ul a#nav-4 { background-position: -392px 0;  height: 48px; width: 147px; }
nav ul a#nav-5 { background-position: -541px 0;  height: 48px; width: 124px; }
nav ul a#nav-1:hover { background-position: 0 48px; }
nav ul a#nav-2:hover { background-position: -103px 48px; }
nav ul a#nav-3:hover { background-position: -234px 48px; }
nav ul a#nav-4:hover { background-position: -392px 48px; }
nav ul a#nav-5:hover { background-position: -541px 48px; }

So the default navigation right now can'thave that transparent look. It needs to be normal. But when I hover over a button I want the hover effect to fade in and out.....Can this be done?

No way to a fade effect with a sprite, you have to use an image in your html and another as background, so you will be able to change opacity only of the html image.

It sounds like what you want is to not make it transparent after in the fadeout, in which case you should change the opacity on the mouse-leaving fade, currently you have it going to 0.1, or 10% opacity, but you're starting it at 70% opacity, so it seems you'd want it to go back to 70%, like this:

$("nav ul a").hover(function(){
  $(this).stop().fadeTo(300, 0.9);
}, function(){
  $(this).stop().fadeTo(300, 0.7); //<--change this to 0.7
}).fadeTo(0, 0.7);

You can test it here.