动画淡化链接的代码[关闭]
Posted
技术标签:
【中文标题】动画淡化链接的代码[关闭]【英文标题】：code to animate fading a link [closed] 【发布时间】：2013-01-26 16:32:09 【问题描述】：编辑：在 cmets 中回答 - 我如何为 cmets 中的答案投票？谢谢！
我一直在尝试实现这一点但无济于事——我不知道出了什么问题——它在 jsfiddle 中运行良好，但在我的实际 html 代码中却没有......我认为这与我实现它的方式有关。如果这有点初级，我很抱歉，但我对 jQuery 很陌生。这是 HTML 代码（包括 jQuery 代码 sn-p）：
<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>
非常感谢任何反馈、cmets 和建议！巴乔
【问题讨论】：
You can't animate colors 在 jQuery 中没有 color plugin 或 jQuery-UI。 不过，css3 transitions 可以轻松做到这一点。 ***.com/questions/7555811/jquery-text-color-fade-in 和 ***.com/questions/4512481/fading-colors-with-jquery 以及许多其他人的完全相同的副本，如果您稍微搜索一下... 你想让链接文本变淡吗？ @Blazemonger 谢谢！快速参考 UI 库解决了这个问题 - 总有一天要复习基础知识。 :D 【参考方案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/
【讨论】：
是的 - 这就是我正在寻找的答案，不知道我需要一个单独的库来启用 UI 效果...谢谢！【参考方案2】：您需要 jQuery Color 插件来为颜色设置动画 - 获取一份 here 的副本。记得在主 jQuery 库之后包含它。
或者，如果您希望它完全出现和消失，也许只是为不透明度而不是颜色设置动画：
$('a').mouseenter(function()
$(this).animate(
opacity: '1'
, 1000);
).mouseout(function()
$(this).animate(
opacity: '0'
, 1000);
);
【讨论】：
感谢您的提醒 - 再说一次，我不知道我必须引用 UI 库（或者那个库是为了我们的目的而存在的......）！【参考方案3】：如果你想让文本褪色......使用不透明度......
$(document).ready(function()
$('a').mouseenter(function()
$(this).animate( opacity : '0.5' , 1000);
).mouseout(function()
$(this).animate( opacity: '1', 1000);
);
);
【讨论】：
不透明度也是一个不错的选择，但我不想只是淡化文本，我想在悬停时淡化它，然后恢复到之前的颜色。以上是关于动画淡化链接的代码[关闭]的主要内容，如果未能解决你的问题，请参考以下文章