Question

我试图做一个文字链接淡入淡出效果。我试图通过.css（） - 函数改变颜色。颜色正在变化，但.fadeIn（） - 函数不起作用。我做错了什么，如何解决？

$('#menu li a').hover(
        function() {
            $(this).css('color','#fff').fadeIn();
        },
        function() {
            $(this).css('color','#000').fadeIn();
        }
    );

Answer 1

.fadeIn() in不会淡化您.css() func中的文字。它与.fadeOut()功能一起使用，用于在屏幕上显示或隐藏对象。要淡化颜色更改，您需要使用.animate() - 这是一个使用此插件找到here的工作示例here。

$('a').mouseover(function(){

    // #FFFFFF = color to fade | 100 = time of fading
    $(this).animate({color:'#FFFFFF'},100);
    $(this).animate({color:'#000000'},100);

}).mouseout(function(){

    // this get called when mouse leaves.
    // Set the color to default color blue        
    $(this).animate({color:'blue'},100);

    });

请注意，最好使用.mouseover() / .mouseout()然后使用悬停，因为它会在此处创建问题（重新链接和重新加载）以及此错误的示例：http://jsfiddle.net/EFgma/54/

希望这有帮助。

Answer 2

在您加入jQuery UI（或jQuery color）后，您需要animate颜色：

$('#menu li a').hover(
    function() { $(this).animate("color", "#FFFFFF"); },
    function() { $(this).animate("color", "#000000"); }
}

或者使用CSS3过渡（完全避免使用jQuery）：

.menu li a {
    color: #000000;
    transition: 1s color; /*animates for 1 second*/
    -moz-transition: 1s color; /*For Firefox < 16.0*/
    -webkit-transition: 1s color; /*For WebKit (Chrome, Safari)*/
}
.menu li a:hover {
    color: #FFFFFF;
}

然而，CSS3 transitions'支持is limited; IE＆lt; = 9不支持它（虽然它很快就会在IE10中得到支持）。

Answer 3

与往常一样，我想提倡“progressive enhancement”方法，因为我是肛门保持。
不接受这个答案，因为它没有直接回答你的问题。

不应该对网站添加功能的功能应该仔细权衡：我认为链接上的颜色淡化并不重要。那么为什么每个访问你网站的人都只为这个“功能”下载jQuery + jQuery UI？

仅向支持转换的人添加转场。您也可以更轻松地维护此代码。它也是移动设备上的硬件加速。

.menu li a {
    color: #000000;
    -webkit-transition: color 1s linear;
    -moz-transition: color 1s linear;
    -ms-transition: color 1s linear;
    transition: color 1s linear;
}
.menu li a:hover {
    color: #FFFFFFF;
}

使用过时的浏览器（IE＆lt; = 9）的人可能会得到它，他们需要更新或更改，如果不是每个站点都是“为他们”开发的，并且代价是所有其他站点。

淡化悬停文本链接颜色

3 个答案: