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 remov

Answer 1

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?

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

Answer 3

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/