javascript - 动画不透明度弄乱了我的文字

Question

我正在尝试创建以下效果:当我将鼠标悬停 在我的链接上时，该链接会改变颜色，这部分可以工作，但我的代码的问题是当我将鼠标悬停在上面时我看不到我的文本。我知道我可以通过将图像添加到我的 span 和 anchor 标记来解决这个问题，我也知道有一个插件可以为颜色设置动画，但是如果可能我想解决这个 WITHOUT 背景图片和插件。那可能吗？
我创造了这个FIDDLE让你看到我的问题。

我的代码:

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

Answer 1

好吧，您已经在使用 jQuery，为什么不使用 jQuery UI(您引用的插件)并用一个元素完成所有事情。

想一想，每次您想要这样的链接时，您是否会记得包含额外的 .yellow 范围？

此外，为什么不使用渐进式增强并使用 CSS 来完成这一切？您甚至可以为 IE 做一个 jQuery 回退？

请参阅我附加的 Fiddle。

http://jsfiddle.net/nzcGy/3/