Fading text color using JavaScript

Question

I have a simple script that changes the color of my navigation links when the mouse is hovered over it:

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

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

Now I want to try to "fade" the colors of the links for a better looking transition. Is there any way to do this with pure JavaScript?

score 1 · Accepted Answer · answered Mar 31 '15 at 16:31

1

You should do it with CSS alone..

.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>

If you have to do it with javascript, you will have to break the color to RGB values, manually/programmatically animate them and while doing so apply them to the element in question..

answered Mar 31 '15 at 16:31

Gabriele Petrioli

191,379
34
261
317

Thank you, I didn't know it would be so hard to do in JavaScript! This is easy and clean, I couldn't find any straight forward answers on this topic. I'll mark your's as the answer. – Mar 31 '15 at 16:34

score 0 · Answer 2 · edited May 23 '17 at 11:50

This should answer it: Fade Effect on Link Hover? Several approaches are shown, the most used and modern one is using CSS3-transitions like posted in the first answer:

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

Fading text color using JavaScript

2 Answers2