CODEWITHSUNDEEP
javascriptjquery
Jake
Jake

Reputation: 1177

Fading colors with jquery?

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

Upvotes: 0

Views: 430

Answers (3)

JakeParis
JakeParis

Reputation: 11210

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/

Upvotes: 0

Arnab
Arnab

Reputation: 726

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?

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630359

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.

Upvotes: 2

Related Questions