jQuery UI

Effect Methods

There are a number of ways to easily add animation effects, many of which simply extend existing jQuery methods.

Basic Effect Transition

The simplest way to apply an animation effect is to call the effect() method on any DOM element and specify the animation type, options, speed and callbacks as needed. If you need to couple an animation with a hide, show or toggle effect, see the visibility transitions in the next section.

• Effect - Direct way to apply an animation to any element

Visibility Transitions

These effect extend the base class API to bring visual transitions to the standard hide, show and toggle visibility functions in jQuery. All the standard animation types are supported.

• Show - As an element is being shown, animate it's entrance
• Hide - As an element is being hidden, animate it's exit
• Toggle - As an element is being toggled between show or hide states, animate the transition

Color Transitions

The jQuery UI effects core extends the animate function to be able to animate colors as well. These transitions can animate the background and border colors and accept colors specified in hex, rgb and color names. This is used extensively by the class transition effects in the next section.

• Animate - Animate background and border colors

Class Transitions

The jQuery UI effects core extends the base class API to be able to animate between classes. This is a very powerful way script complex animations because these effects analyze the differences between the style attributes of the classes and automatically builds parallel animations to transform between the various style attributes that are different. Any style attribute that contains a numeric value will be animated, from hex colors to dimensions, padding, margins, border thickness, positioning, font size, line-height and more will automatically animate.

• addClass - Adds a class to elements with an animated transition between the states.
• removeClass - Adds a class to elements with an animated transition between the states.
• toggleClass - Adds a class if it is not present, and removes the class if it is present with an animated transition.
• switchClass - Switches between one class and another with an animated transition.

Advanced Easing

The excellent jQuery easing plugin porting Robert Penners advanced easing functions to jQuery has been included into effects.core.js.

For usage and documentation, please see the jQuery Easing plugin homepage.