使用 JavaScript 淡化文本颜色

Question

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

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

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

现在我想尝试 "fade" 链接的颜色以获得更好看的过渡。有什么办法可以用纯 JavaScript?

Answer 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值，manually/programmatically为它们制作动画，同时这样做将它们应用于相关元素..

Answer 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; }

使用 JavaScript 淡化文本颜色

Fading text color using JavaScript

javascript

css

transition