Animation Options (^) ❘ 241
Although the animate() method is limited to animating numeric CSS properties, jQuery UI provides
a jQuery Color plugin as part of jQuery UI for animating transitions between colors as well as
numeric values.
The next section covers the options that you can provide to any of jQuery’s animation methods to
have a more fi ne-grained control over jQuery animations.
Animation Options
All jQuery’s animation methods—the animate() method as well as show(), hide(), toggle(),
slideIn(), slideDown(), slideToggle(), fadeIn(), fadeOut(), and fadeToggle()—support providing
a simple JavaScript object of key, value pairs in place of the duration, easing, and callback function
arguments, which allows you to fi ne-tune all aspects of an animation.The following describes what the method signatures of all these methods look like when using the
options argument instead of the duration, easing, and callback function arguments.➤ (^) animate(properties, options)
➤ (^) show(options), hide(options), toggle(options)
➤ (^) slideDown(options), slideUp(options), slideToggle(options)
➤ (^) fadeIn(options), fadeOut(options), fadeToggle(options)
The options that can be provided in the alternative options argument are as follows:
➤ (^) duration—The length of the animation. The value will be either an integer representing
milliseconds or one of the following strings: 'slow', 'normal', or 'fast'.
➤ (^) easing—How the transition is animated over time. The value will be a string referencing one
of jQuery’s built-in easing functions.
➤ (^) queue—A boolean value that indicates whether the animation should be placed in jQuery’s
animation queue. If the value provided to queue is false, the animation is not queued and it
begins immediately. If a string is the value provided, the animation is placed in a queue that
is named after the string provided. If a custom queue name is used, the animation will not be
started automatically; to start a custom queue, call the dequeue(queueName) method.
➤ (^) specialEasing—Applicable only to the animate() method. An object that maps CSS proper-
ties provided in the properties argument to easings. This makes it possible to animate differ-
ent properties with different easings.
➤ (^) step function((number) now, (tween) tween—A callback function that is executed once for
each animated property of each animated element, per step of the animation.
➤ (^) progress function((promise) animation, (number) progress, (number) remainingMillisec-
onds) —A callback function that is executed after each step of the animation but is executed
only once per animated element regardless of the animated properties.
➤ (^) complete function()—A callback function that is executed when the animation has
completed.
http://www.it-ebooks.info