Click anywhere to apply the effect.
$( document ).click(function() { $( "div" ).effect( "bounce", "slow" );}); (#)Api Effect
# jQuery UI API - .effect()
## Category
(#) | (#) | (#)
## Usage
**Description:** Applies an animation effect to an element.
**Returns:** (http://api.jquery.com/Types/#jQuery)
.effect( effect [, options ] [, duration ] [, complete ] )
| Parameter | Type | Description | Default |
| --- | --- | --- | --- |
| effect | String | A string indicating which (#) to use. | |
| options | Object | Effect-specific settings and (#). | |
| duration | Number or String | A string or a number indicating how long the animation will run. | 400 |
| complete | Function() | A function to call once the animation is complete. | |
.effect( options )
| Parameter | Type | Description |
| --- | --- | --- |
| options | Object | All animation settings. The only required property is effect. * **effect** Type: String Description: A string indicating which (#) to use. * **easing** (default: `"swing"`) Type: String Description: A string indicating which (#) function to use. * **duration** (default: `400`) Type: Number or String Description: A string or a number indicating how long the animation will run. * **complete** Type: Function() Description: A function to call once the animation is complete. * **queue** (default: `true`) Type: Boolean or String Description: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. |
The `.effect()` method applies a named animation (#) to an element. Many effects also support show/hide modes, which can be accomplished via the [`.show()`](#), [`.hide()`](#), and [`.toggle()`](#) methods.
## Example
Apply the bounce effect to a div.
.effect() Demo div { width: 100px; height: 100px; background: #ccc; border: 1px solid #000; }
YouTip