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

jquery fadein fade fadeout
user798596 picture user798596 · Nov 30, 2011 · Viewed 20k times · Source

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

Answer

James Allardice picture James Allardice · Nov 30, 2011

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.

Related questions

jquery fade out display:none

Why doesn't my jQuery fade out work. If I replace Out with In and None with Inline it will fade in fine but it won't fade out. Any ideas? $(this).find(".hover").fadeOut("slow").css({display:"none"});

Read More
jQuery How do you get an image to fade in on load?

All I want to do is fade my logo in on the page loading. I am new today to jQuery and I can't managed to fadeIn on load please help. Sorry if this question has already been answered I have …

Read More
How do you fadeIn and animate at the same time?

Using jQuery I'm creating a basic 'tooltip' animation so that the tooltip will appear in a little animation in which it fades into view as well as move vertically. So far I have this: $('.tooltip').fadeIn('slow'); $('.tooltip').…

Read More