O'Reilly logo

jQuery UI 1.10: The User Interface Library for jQuery by Dan Wellman, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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({

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required