The animate () method Improved by jQuery UI

The jQuery animate () method, which allows visual effects by changing CSS properties, has a number of limitations on CSS properties associated with the color and easing options (setting progression in the effect). Thanks to jQuery UI, it is possible to implement improved effects.

CSS Properties for Managing Colors

Unlike the jQuery animate () method, jQuery UI allows the use of color CSS properties such as color, background-color, border-color, etc.

In the following example, we want to create an effect to gradually change the background and character colors of two paragraphs: initially in black letters on a white background (Figure 14-13), the elements gradually change into white characters (color: "white") on a black background ("background-color": "black"). Figure 14-14 shows this effect in progress, and the final result is shown in Figure 14-15:

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<p> Paragraph 1 </p>
<p> Paragraph 2 </p>

<script>

$("p").animate ({
  "background-color" : "black",
  color : "white"
}, 10000);

</script>
The two paragraphs before applying the effect

Figure 14-13. The two paragraphs before applying the effect

Changing colors with the animate () method: intermediate step

Figure 14-14. Changing ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.