How to put in fade effect with jQuery in sprite Navigation

Question

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 { background-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?

Answer 1

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.

Answer 2

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.