Color animations

As well as the complete range of easing functions, the effects core file also gives us the ability to attractively and smoothly animate between different colors. Several CSS properties can be animated including the color, background-color, border-color, and outline-color.

jQuery UI extends jQuery's animate() method to achieve color animations, so the syntax to implement it is the same as using animate(). For any other purpose, we just need to target one of the above CSS properties and supply the new color value as a string, hexadecimal (#xxxxxx), or RGB (rgb(xxx, xxx, xxx)) value. Let's look at a basic example.

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.