Fading colors with jquery?

Question

I have a regular color change using jquery, but I'd like to have it so it has a smooth color change. At the moment, the code changes the color of a link on hover and then removes it when the mouse is removes. I have seen one tutorial but it doesn't explain it and it does not look like my current code. This is what it looks like at the moment:

$(document).ready(function() {
$("#link1,#link2,#link3").hover(function() {
$(this).addClass("red");
},function(){
 $(this).removeClass("red");   }); });

Thanks in advance

score 2 · Accepted Answer · answered Dec 22 '10 at 18:42

2

You'd use .animate(), like this:

$(document).ready(function() {
  $("#link1,#link2,#link3").hover(function() {
    $(this).stop().animate({ color: "#990000" });
  },function(){
    $(this).stop().animate({ color: "#FFFFFF" });
  }); 
});

Note though, you need either the color plugin, or jQuery UI included for color animations to work.

answered Dec 22 '10 at 18:42

Nick Craver

623,446
136
1,297
1,155

Thanks a lot mate, I used this plugin http://plugins.jquery.com/node/467/release and all is well – Jake Dec 22 '10 at 18:48
I have another question, how would I make the first hover animation instant and the change back to the original slow? It's just I saw it on a website and thought it looked pretty cool. – Jake Dec 22 '10 at 19:11
@Jake - you can add a duration, for example: `$(this).stop().animate({ color: "#990000" }, 50);` for a quick animation on hover, and `$(this).stop().animate({ color: "#FFFFFF" }, 500);` for a slow one back – Nick Craver Dec 22 '10 at 19:13
thanks for the quick response, i can't use a 0 value though, so is there a way to make it absolutely instant? Thanks so much for all you've done so far though – Jake Dec 22 '10 at 19:15
@Jake - yup, to make it totally instant, use `.css()`, like this: `$(this).stop().css({ color: "#990000" });` – Nick Craver Dec 22 '10 at 19:17

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

If you are looking for "smooth" color change then perhaps you are asking for color animation, check out this thread:

How do you fade in/out a background color using jquery?

edited May 23 '17 at 10:33

Community

1
1

answered Dec 22 '10 at 18:45

Arnab

736
5
14

score 0 · Answer 3 · answered Dec 22 '10 at 19:03

0

Here's an easy way without using the extra jquery plugin. In fact, this is mostly done with css. Make 2 divs on top of each other and fade the top one. Like so: http://jsfiddle.net/Jny9x/

answered Dec 22 '10 at 19:03

JakeParis

11,056
3
42
65

Fading colors with jquery?

3 Answers3

Linked