From jQuery 1.2 onwards, the ability to tween (animate) from one color to another, in other words fade one color into a different color is as simple as inserting one line of code.
(In order to use this effect though, you will need to include the official Color Animations jQuery plugin which can be grabbed here.)
Technically all that the color animation is doing is it is making subtle CSS changes utilizing the jQuery.fx.step functionality to fire it along, but seeing as this all happens behind the scenes, all you really need to know are the CSS properties that you are allowed to manipulate in this manner…
…which are currently ‘backgroundColor’; ‘borderBottomColor’; ‘borderLeftColor’; ‘borderRightColor’; ‘borderTopColor’; ‘color’; ‘outlineColor’, just by the way.
In addition, colors can be specified as one of a pre-set range of named colors (e.g. blue, pink), or in rgb format (e.g. rgb(221,221,221)), or as hex (e.g. #cc6600), or finally as shorthand hex (e.g. #ddd).
Let’s for example say you wish to face a page’s background color from its current white, all the way through to blue and once that is done, tween the now blue background to it’s final pink stage.
To achieve this is really simple. What we are going to do is call the animate function which will be responsible for the color tween and when the first animate call is done, chain a second animate after the original to change the color to the final desired pink.
And here’s the jQuery magic that will do all of this for us:
$("body").animate( { backgroundColor: 'blue' }, 1000).animate( { backgroundColor: 'pink' }, 1000);
You’ll see in the above that all we do is specify the CSS property on which to act (this time it is BackgroundColor) and then specify how many milliseconds the animation needs to act for.
And that’s it. The magic of jQuery strikes again! :)
You might also enjoy:
-
HTML or Web colors are defined using a hexadecimal (hex) notation for the combination of Red, Green and Blue color values, commonly known as RGB. The lo ... -
Sometimes you need to RGB array that makes up a color when working in the wonderful world of PHP. Don't ask me why or when, though that said, I have require ... -
A bash script is simply put a file containing a list of commands to be executed by the bash shell (remember, there are a number of different shells availabl ...
-
Firefox has a nasty habit of returning element background colors and colors in general in the format rgb(xxx,yyy,zzz) as opposed to the normal #xxyyzz ... -
Using jQuery to highlight a table row on mouse over is pretty simple to achieve, and today I'll quickly demonstrate how you can achieve this neat effect usi ...
