YouTip

# jQuery UI API - .addClass() ## Category (#) | (#) | (#) ## Usage **Description:** Adds the specified class to each of the set of matched elements when animated style changes. **Returns:** (http://api.jquery.com/Types/#jQuery) .addClass( className [, duration ] [, easing ] [, complete ] ) | Parameter | Type | Description | Default | | --- | --- | --- | --- | | className | String | One or more class names to be added to the class attribute of each matched element, separated by spaces. | | | duration | Number or String | A string or a number determining how long the animation will run. | 400 | | easing | String | A string indicating which (#) function to use. | swing | | complete | Function() | A function to call once the animation is complete. | | .addClass( className [, options ] ) | Parameter | Type | Description | | --- | --- | --- | | className | String | One or more class names to be added to the class attribute of each matched element, separated by spaces. | | options | Object | All animation settings. All properties are optional. * **duration** (default: `400`) Type: Number or String Description: A string or a number determining how long the animation will run. * **easing** (default: `swing`) Type: String Description: A string indicating which (#) function to use. * **complete** Type: Function() Description: A function to call once the animation is complete. * **children** (default: `false`) Type: Boolean Description: Whether the animation should be applied to all descendants of the matched elements. This feature should be used with caution, as determining whether an element is a descendant of the animation is costly and grows linearly with the number of descendants. * **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. | Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another, while ensuring that all style changes are handled via CSS, without the need for JavaScript. All class animation methods, including `.addClass()`, allow custom animation duration and (#) functions, and also provide a callback when the animation is complete. Not all styles can be animated. For example, background images. Any style that cannot be animated will change at the end of the animation. This method extends jQuery's built-in [.addClass()](#) method. If jQuery UI is not loaded, calling the `.addClass()` method will not fail directly, as the method exists in jQuery. However, the expected behavior will not occur. ## Example Add the class "big-blue" to the matched elements. div { width: 100px; height: 100px; background-color: #ccc; } .big-blue { width: 200px; height: 200px; background-color: #00f; } $( "div" ).click(function() { $( this ).addClass( "big-blue", 1000, "easeOutBounce" );}); (#)