How to Add Color Animations with jQuery UI Special Effects in CSS3

By John Paul Mueller

If you want to perform an actual color animation in your application, you need to use the animate() method in CSS3. This method seems to be a work in progress because the documentation for it isn’t nearly as well-written as the other documentation for jQuery UI.

The method does seem to work for all major target platforms and browsers, but you’ll want to experiment to ensure that it will work for every browser you need to target. The color will actually transition in this case. It’s also possible to control the text colors to a large degree.

The following example shows the most commonly used transitions. (You can find complete code for this example in the Chapter 06Animations folder of the downloadable code as Animate.HTML.)

 // Track the normal state.
 var State = true;
  if (State)
  // Set to the changed state.
   backgroundColor: "#0000ff",
   color: "white",
   borderColor: "#ff0000",
   height: 100,
   width: 600
   }, 1500);
  // Set to the normal state.
   backgroundColor: "#7fffff",
   color: "black",
   borderColor: "#00ff00",
   height: 50,
   width: 400
   }, 1500);
  // Change the state.
  State = !State;

If you’re thinking that this code looks like it works similar to CSS, it does, but the animate() method provides a significantly reduced list of features it can change.

You can change many features of the text and the container that holds it, including both the width and height. However, you can’t change things like the kind of border used to hold everything — even though you can change the color of the border. The jQuery UI documentation states that animate() supports these properties:

  • backgroundColor

  • borderBottomColor

  • borderLeftColor

  • borderRightColor

  • borderTopColor

  • color

  • columnRuleColor

  • outlineColor

  • textDecorationColor

  • textEmphasisColor

The library-supplied examples (those provided by the vendor on the vendor’s site) show that a few other properties are supported, including width, height, and borderColor. Use these non-published properties with care. Even though they work now, they may not be supported in future releases of the library.