YouTip

# jQuery UI API - .switchClass() ## Category (#) | (#) | (#) ## Usage **Description:** Adds and removes classes from matched elements simultaneously when animating style changes. **Returns:** (http://api.jquery.com/Types/#jQuery) .switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] ) | Parameter | Type | Description | Default | | --- | --- | --- | --- | | removeClassName | String | One or more class names to be removed from the class attribute of each matched element, separated by spaces. | | | addClassName | 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 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. | | .switchClass( removeClassName, addClassName [, options ] ) | Parameter | Type | Description | | --- | --- | --- | | removeClassName | String | One or more class names to be removed from the class attribute of each matched element, separated by spaces. | | addClassName | 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 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. Use this option with caution, as determining whether an element is a descendant of an animation is expensive 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. | The `.switchClass()` method allows you to simultaneously add one class while removing another in an animated transition. 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 needing JavaScript. All class animation methods, including `.switchClass()`, allow custom animation durations and (#) functions, and also provide a callback upon animation completion. Not all styles can be animated. For example, animating background images. Any non-animatable styles will change at the end of the animation. This plugin extends jQuery's built-in `.switchClass()` method. If jQuery UI is not loaded, calling `.switchClass()` will not fail directly because the method exists in jQuery. However, the expected behavior will not occur. ## Example Add the class "blue" to matched elements and remove the class "big" from matched elements. div { width: 100px; height: 100px; background-color: #ccc; } .big { width: 200px; height: 200px; } .blue { background-color: #00f; } $( "div" ).click(function() { $( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" );}); (#)