jQuery - How to fade in/out from one color to another? (possible 3rd party plugin fo jQuery?)

Question

I'm looking for a jQuery script or a 3rd party plugin for jQuery, which can create a fade in/out effect based on "from color" and "to color". Example how I see it:

$( selector ).fadeColor({
    from: "#900", // maroon-red color
    to: "#f00",   // blood-red color
}, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds

Solution 1

jQuery UI extends jQuery's animate method to include colour animation. You can then do something like:

$("#someId").animate({backgroundColor: "#ff0000" });

Here's a working example.

Solution 2

You don't need another plugin. Example:

jQuery

$(selector).css("color", "blue");

CSS

selector {
  transition: color .3s;
}

This will work just fine (and without slowing down the website).

Solution 3

The jQuery UI animate function will do it.

See here for jsFiddle.

Comments

[James Allardice]

jQuery's animate won't animate colours unless you include jQuery UI too, which extends it. See my answer.

[James Allardice]

Have you included jQuery UI? Make sure you include it after the core jQuery library. Update your question with some code, or make a jsfiddle demonstrating the problem.

[Anderson Green]

@JamesAllardice The animation happens so fast that it's difficult to even notice it. Is it possible to slow down the fading animation so that it can be seen more clearly?

[Anderson Green]

is it possible to set the speed of the fading animation using JQuery UI?

[James Allardice]

@AndersonGreen - The 2nd argument to .animate() is the duration of the effect, in milliseconds.

[Rich O'Kelly]

@AndersonGreen Yes, you can specify a duration, see api.jquery.com/animate for more information

[Dom Vinyard]

It should be said that this requires jQuery UI.

[KryptoniteDove]

Save yourself an hour and use this!

[Mirko]

Even shorter: $(selector).css("transition", "color .3s").css("color", "blue");

[BeNice]

This works nicely highlighting fields using background color. However - currently a bit garish! So.... QUESTION>>> Is there a way to get it to transition to a color and then transition back? I am highlighting a field that automatically updates when you change another field so I would like it to either slowly become yellow and fade back to white OR if the white field would become yellow with the update and then fade back to white IYSWIM! Either would be fine. Currently the yellow alrets u to tjhe change but just sits there blinding you!