Анимация навигации JQuery заставляет ли тег исчезнуть

Question

Правильно, поэтому я пытаюсь сделать так, чтобы моя навигация a: hover background исчезала и исчезала, когда на него наведена мышь. После поиска в Google я наткнулся на этот код jquery и решил использовать его. Вот пример использования моего сайта, когда он не работает: 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
            });
        });

Кажется, это работает, за исключением того факта, что мои теги li исчезают вместе с тегом привязки и текстом. Я полагаю, что это как-то связано с непрозрачностью, но когда я убираю ее, эффект больше не виден. Скрипт изначально использовался с изображениями.

Думаю, если бы я мог найти способ привязать его только к правилу a: hover, тогда это было бы хорошо, но я не знаю, возможно ли это. Я не очень хорош в jquery, за исключением случаев, когда редактирую его, поэтому любая помощь с этим будет оценена. Извините заранее, если ответ прямо здесь, но я просто не могу это прочитать.

Answer 1

Как я понимаю, вы хотите, чтобы текст ссылок всегда был виден и bg исчезал / исчезал? Поэтому попробуйте использовать анимацию bg вместо тега "a". Взгляните на фоновую технику анимации. http://snook.ca/technical/jquery-bg/ (демонстрационный пример C: Fade 1-color) учебник http://snook.ca/archives/javascript/jquery-bg-image-animations/

Answer 2

Когда вы меняете JQuery на этот эффект, все в порядке:

$(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
    });
});