使用 JavaScript 淡化文本颜色答案

【问题标题】：Fading text color using JavaScript使用 JavaScript 淡化文本颜色
【发布时间】：2015-06-05 02:03:59
【问题描述】：

我有一个简单的脚本，可以在鼠标悬停在导航链接上时更改其颜色：

function fadeToNormal(element) {
    element.style.color = "#000000";
}

function fadeToSelected(element) {
    element.style.color = "#990099";
}

现在我想尝试“淡化”链接的颜色以获得更好看的过渡效果。有没有办法用纯 JavaScript 做到这一点？

【问题讨论】：

标签： javascript css transition

【解决方案1】：

你应该只用 CSS 来做。

.fade-effect{
  transition: color 0.5s;
  color:#000000;
}
.fade-effect:hover{
  color:#990099;
}

<a href="#" class="fade-effect">link #1</a>
<a href="#" class="fade-effect">link #2</a>

如果您必须使用 javascript 进行此操作，则必须将颜色分解为 RGB 值，手动/以编程方式为它们设置动画，同时将它们应用于相关元素。.

【讨论】：

谢谢，我不知道用 JavaScript 做起来这么难！这既简单又干净，我在这个主题上找不到任何直接的答案。我会把你的标记为答案。

【解决方案2】：

这应该回答它： Fade Effect on Link Hover? 展示了几种方法，最常用和最现代的方法是使用第一个答案中发布的 CSS3-transitions：

 a {
   color:blue;
   /* First we need to help some browsers along for this to work.
      Just because a vendor prefix is there, doesn't mean it will
      work in a browser made by that vendor either, it's just for
      future-proofing purposes I guess. */
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   /* ...and now for the proper property */
   transition:.5s;
 }
 a:hover { color:red; }

【讨论】：