jquery导航动画使li标签消失答案

【问题标题】：jquery navigation animation makes li tag disappearjquery导航动画使li标签消失
【发布时间】：2011-06-16 15:33:37
【问题描述】：

是的，所以我正在尝试将鼠标悬停在我的导航 a:hover 背景淡入淡出的位置。在谷歌上搜索后，我发现了这个 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，所以对此的任何帮助将不胜感激。如果答案是正确的，我很抱歉，但我就是看不懂。

【问题讨论】：

您是否尝试将不透明度从 0 更改为 0.5 ？即 50% 透明
是的，但我宁愿只让背景褪色。我想如果迫在眉睫，我将不得不使用它，下面的教程对我没有帮助。
或许你可以把背景图片移到这里：stackoverflow.com/questions/367020/…

标签： jquery list animation tags

【解决方案1】：

当你把你的 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
    });
});

【讨论】：

它确实使它可见，除了我只需要 a:hover 上的背景淡入，然后当鼠标不再悬停在它上面时淡出。

【解决方案2】：

我不明白，您希望链接的文本始终可见并且淡入/淡出？所以尝试使用 bg 动画而不是“a”标签。看看背景动画技术。 http://snook.ca/technical/jquery-bg/ (demo Example C: Fade 1-colour) 教程http://snook.ca/archives/javascript/jquery-bg-image-animations/

【讨论】：