jquery navigation animation makes li tag disappear

Right, so I am trying to make it to where my navigation a:hover background fades in and out when a mouse hovers over it. After searching on google I came across this jquery code and decided to use it. Here is an example of my site using it while it's not working broken: http://techhosts.net/example/index.html

        $(document).ready(function(){
            $("ul#nav li a").css({"opacity" : 0}).hover(function(){
                $(this).stop().animate({"opacity" : 1}, 600); //Change fade-in speed
            }, function(){
                $(this).stop().animate({"opacity" : 0}, 1200);//Change fade-out speed
            });
        });

It seems to work, except开发者_如何转开发 for the fact that my li tags disappear along with the anchor tag and text. I figure it has something to do with opacity but when I remove it the effect isn't visible anymore. The script was originally used with images.

I think if I could find a way to only tie it to the a:hover rule then it would be fine but I don't know if that's possible. I'm not much good at jquery except when editing it, so any help with this would be appreciated. I'm sorry in advance if the answer is right there, but I just can't read this.

When you change your jquery to this the effect is okay:

$(document).ready(function(){
    $("ul#nav li a").hover(function(){
        $(this).stop().animate({"opacity" : 0}, 600); //Change fade-in speed
    }, function(){
        $(this).stop().animate({"opacity" : 1}, 1200);//Change fade-out speed
    });
});

As I undestand you want the text of links always visible and bg fading in/out? So try to use bg animation instead "a" tag. Take a look at background animaiton technique. http://snook.ca/technical/jquery-bg/ (demo Example C: Fade 1-colour) tutorial http://snook.ca/archives/javascript/jquery-bg-image-animations/