CODEWITHSUNDEEP
javascriptcsstransition
user1650305
user1650305

Reputation:

Fading text color using JavaScript

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?

Upvotes: 0

Views: 1340

Answers (2)

Jonathan Striebel
Jonathan Striebel

Reputation: 823

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

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

Upvotes: 1

Related Questions