2

我试图做一个文本链接淡入淡出悬停效果。我试图通过 .css() 函数更改颜色。颜色正在改变，但 .fadeIn() 函数不起作用。我做错了什么，我该如何解决？

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

3 回答 3

3

.fadeIn()in 不会淡入来自您的.css()功能的文本。它与.fadeOut()函数一起使用，在屏幕上显示或隐藏对象。要淡入您需要使用的颜色变化- 这是一个使用此处找到的插件.animate()的工作示例。

$('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/

希望这可以帮助。

于 2012-09-23T10:05:12.633 回答
2

animate在包含jQuery UI（或jQuery color ）之后，您要么需要颜色：

$('#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' 的支持是有限的；IE <= 9 不支持它（尽管即将推出的 IE10 支持它）。

于 2012-09-23T09:39:02.890 回答
1

与往常一样，我想提倡“渐进式增强”方法，只是因为我是肛门保留。
不要接受这个答案，因为它不能直接回答你的问题。

不向网站添加功能的功能应该仔细权衡：我认为链接上的颜色褪色并不是那么重要。那么，为什么访问您网站的每个人都应该只为该“功能”下载 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 <= 9）的人会明白，他们需要更新或更改，如果不是每个站点都是“为他们”开发的并且以所有其他站点为代价。

于 2012-09-23T09:52:23.793 回答