悬停文字链接颜色 [英] Fade on hover text link color

问题描述

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

  $（'＃menu li a'）。hover（
 $ function（）{
 $（this）.css（'color'，'＃fff'）。fadeIn（）; 
}，
 function（）{
 $ （this）.css（'color'，'＃000'）。fadeIn（）; 
} 
）; 
  

解决方案

.fadeIn（） 将不会从您的 .css（） func。它与 .fadeOut（） 功能一起使用，在屏幕上显示或隐藏一个对象。要淡入颜色变化，您需要使用 .animate（） - 这是一个使用此插件的工作示例此处找到此处。

  $（'a'）。mouseover（function（）{
 
 // #FFFFFF =要淡出的颜色| 100 = （{color：'＃FFFFFF'}，100）; 
 $（this）.animate（{color：'＃000000'}，100）; 
 
}）。mouseout（function（）{
 
 //当鼠标离开时调用此函数
 //将颜色设置为默认颜色蓝色
 $（这个）.animate（{color：'blue'}，100）; 
 
}）; 
  

请注意，最好使用 .mouseover（） http://jsfiddle.net/EFgma/54/

希望这会有所帮助。

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 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);

    });

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/

Hope this helps.

这篇关于悬停文字链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！