[jQuery] Fading a background image

[jonhobbs]

HI Guys,

I'm trying to fadeIn the background image of an A tag (which is set to
display:blovk so effectively a div) when you roll over it. The A tags
form the main menu of a site I am designing.

I haven't managed to find any way of changing the Background Image
opacity using css so can't use the normal animate method.

I came up with one idea which was to wrap a coupld of block elements
inside each other. Each A tag would have the background image applied
and over the top of that there would be another block element with a
white background which I would fade out when I wanted the background
image to be visible.

The problem I have found is that when I fade the div with the white
background it also fades the contents, including the text of the menu
item.



Here is my Jquery.....

$(".MyMenu a").hover(
      function () {
        $(this).children(".Fade").fadeOut("fast");
      },
      function () {
        $(this).children(".Fade").fadeIn("fast");
      }
    );


Here is my CSS...

.MyMenu{}
.MyMenu a{display:block; background:url(MenuBack.gif) no-repeat right
center; text-align:right;}
.MyMenu a .Fade{display:block; background-color:White;}
.MyMenu a .Text{display:block; padding:4px 28px 5px 0;}



And here is the HTML......

<div class="MyMenu">
        <a href="#"><span class="Fade"><span class="Text">Summary</
span></span></a>
        <a href="#"><span class="Fade"><span class="Text">Full
Description</span></span></a>
        <a href="#"><span class="Fade"><span class="Text">Compare
Specs</span></span></a>
        <a href="#"><span class="Fade"><span class="Text">Images &amp;
Video</span></span></a>
        <a href="#"><span class="Fade"><span class="Text">User
Reviews</span></span></a>
</div>



Can anyone htink of an easier way to do this, or a better way
altogether ?

Jon