Configuring alternative animations

The datepicker widget comes with an attractive built-in opening animation that makes the widget appear to grow from nothing to full size. Its flexible API also exposes several options related to animations. These are the duration, showAnim, and showOptions configuration options.

The simplest animation configuration that we can set is the speed at which the widget opens and closes. To do this, all we have to do is change the value of the duration option. This option requires a simple string that can take a string value of either slow, normal (the default), or fast, or a number representing a duration in milliseconds.

Change the configuration object in datePicker10.html to the following:

$("#date").datepicker({
  duration: "fast"
});

Save this variation as datePicker11.html. When we run this page in a browser, we should find that the opening animation is visibly faster.

Along with changing the speed of the animation, we can also change the animation itself using...