悬停文本链接颜色淡化
我正在尝试做一个文本链接淡入淡出悬停效果.我试图通过 .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/
希望这会有所帮助.
相关文章