YouTip LogoYouTip

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; }

Click anywhere to apply the effect.

$( document ).click(function() { $( "div" ).effect( "bounce", "slow" );}); (#)
← Api Explode EffectApi Easings β†’