Javascript 设置不透明动画会弄乱我的文本

我试图创建以下效果：当我将鼠标悬停在我的链接上时，该链接会改变颜色，这部分工作的问题是，我的代码的问题是，当我将鼠标悬停在上面时，我看不到我的文本。我知道我可以通过在span和anchor标签中添加图像来解决这个问题，我也知道有一个插件可以为颜色设置动画，但是如果可能的话，我想在没有背景图像和插件的情况下解决这个问题。可能吗
我创建此文件是为了让您了解我的问题

我的代码：

$(document).ready(function () {
    $('.link').hover(function () {
        var heightCheck = $(this).outerHeight();
        //alert(heightCheck);
        $(this).stop().animate({
            opacity: 0
        }, 1000);
        $('.yellow').height(heightCheck);
        $('.yellow').css({
            'margin-top': -heightCheck
        });
    }, function (heightCheck) {
        $(this).stop().animate({
            opacity: 1
        }, 1000, function () {
            $('.yellow').css({
                'margin-top': +heightCheck
            });
        });
    });
});

---

如果我理解您在这里想要实现的目标，这看起来可以用一行CSS来解决。e、 g

.link:hover { background-color: yellow;}

---

无法看到文本的原因是不透明度：0使其不可见。

更改它，使灰色背景色应用于li样式，而不是链接本身。去掉.link的动画不透明度线

---

也许是这样的

好吧，您已经在使用jQuery了，为什么不使用jQuery UI（您引用的插件）并用一个元素完成所有操作呢

想一想，每次你想要这样的链接时，你会记得包括额外的

.yellow

span吗

另外，为什么不使用渐进式增强并使用CSS来实现这些呢？你甚至可以为IE做一个jQuery回退

看看我的小提琴

---

我使用了不透明度来获得这个结果，现在链接的不透明度和跨度不透明度都设置为0.5，看起来好多了。离你想要的有点近吗

---

更新在此处对代码进行了更改，效果完美，您也不需要跨度。

Thx获取答案！！不工作：（我知道不透明是个问题，但不知道如何实现我的文本显示：（+1但比检查ie更好的是使用Modernizer并检查此方法的优势，即Chrome、Safari和Firefox-您根本不必使用任何javascript！我们只需使用js检查讨厌的ie。同意，但我认为这可能有点超前了：）这就是我想要的效果！+1！我肯定会使用jquery ui的

addClass

动画功能，而不是内联样式。如果我使用jquery ui，即.Txh作为答案，但看起来我必须使用jquery ui！