悬停文本链接颜色淡化

Fade on hover text link color(悬停文本链接颜色淡化)

问题描述

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

Im trying to do a text link fade hover effect. Im trying to change the color through .css()-function. The colors are changing but the .fadeIn()-function doesn't work. What am I doing wrong and how do I solve it?

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

推荐答案

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

.fadeIn() in will not fade in the text that from your .css() func. It's used with the .fadeOut() function, to show or hide a object on screen. To fade in a color change you need to use .animate() - this is a working example here using this plugin found 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/

Note it is better to use .mouseover() / .mouseout() then use hover as it create problems (reblinking and recoloring) here and example of this bug: http://jsfiddle.net/EFgma/54/

希望这会有所帮助.

这篇关于悬停文本链接颜色淡化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！