Question

编辑：在评论中回答 - 如何在评论中投票给答案？谢谢！

我一直在尝试实现这一点无济于事 - 我不知道出了什么问题 - 它在jsfiddle中完美运行但在我的实际html代码中却没有...我认为这与我如何实现它有关。我很抱歉，如果这是一个小小的，但我是jQuery的新手。这是HTML代码（包括jQuery代码片段）：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>

</head>
<body>
<script>
$(document).ready(function(){

$('a').mouseenter(function(){
    $(this).animate({
        color: '#ff0000'
    }, 1000);
}).mouseout(function(){
    $(this).animate({
        color: '#000000'
    }, 1000);
});

});
</script>

<a href = "http://google.com" class = "homeLink">Google</a>

</body>
</html>

非常感谢任何反馈，意见和建议！巴乔

Answer 1

在您的代码中加入颜色动画JQuery UI 并尝试相同的...

它会起作用

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

小提琴：http://jsfiddle.net/RYh7U/63/

参考：http://jqueryui.com/animate/

Answer 2

您需要jQuery Color插件来设置颜色动画 - 抓取副本here。请记住在主jQuery lib之后包含它。

或者，如果您希望它显示并完全消失，可能只是为不透明度设置动画而不是颜色：

$('a').mouseenter(function(){
    $(this).animate({
        opacity: '1'
    }, 1000);
}).mouseout(function(){
    $(this).animate({
        opacity: '0'
    }, 1000);
});

Answer 3

如果你想让文字褪色......使用不透明度......

$(document).ready(function(){

   $('a').mouseenter(function() {
     $(this).animate({ opacity : '0.5' }, 1000);
   }).mouseout(function() {
     $(this).animate({ opacity: '1'}, 1000);
   });
});

用于动画淡化链接的代码

3 个答案: