jQuery UI API - .toggleClass()
Category
Effects | Effects Core | Method Overrides
Usage
Description: When the animation style changes, add or remove one or more classes for each element in the set of matched elements, depending on the presence of the class and the value of the switch parameter.
Returns: jQuery
| Parameter | Type | Description | Default Value |
|---|---|---|---|
| ClassName | String | One or more class names (separated by spaces) to be toggled for each element in the matched set. | |
| switch | Boolean | A boolean value specifying whether the class should be added or removed. | |
| duration | Number or String | A string or number determining how long the animation will run. | 400 |
| easing | String | A string indicating which easing function to use. | swing |
| complete | Function() | A function to call once the animation is complete. |
| Parameter | Type | Description |
|---|---|---|
| ClassName | String | One or more class names (separated by spaces) to be toggled for each element in the matched set. |
| switch | Boolean | A boolean value specifying whether the class should be added or removed. |
| options | Object | All animation settings. All properties are optional. duration (default: 400)<br>Type: Number or String<br>Description: A string or number determining how long the animation will run.<br><br>easing (default: swing)<br>Type: String<br>Description: A string indicating which easing function to use.<br><br>complete<br>Type: Function()<br>Description: A function to call once the animation is complete.<br><br>children (default: false)<br>Type: Boolean<br>Description: Specifies whether the animation should be applied to all descendants of the matched elements. This feature should be used with caution, as the cost of determining whether an element is an animated descendant is significant and increases linearly with the number of descendants.<br><br>queue (default: true)<br>Type: Boolean or String<br>Description: A boolean value 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 also accepts 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 accomplished via CSS, not JavaScript. All class animation methods, including .toggleClass(), allow customization of the animation duration and easing function, and provide a callback upon completion of the animation.
Not all styles can be animated. For example, animating background images. Any styles that cannot be animated will be changed at the end of the animation.
This plugin extends the jQuery built-in .toggleClass() method. If jQuery UI is not loaded, calling .toggleClass() method will not fail directly since the method exists in jQuery. However, the expected behavior will not occur.
Example
Toggle the class "big-blue" for matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.toggleClass() Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
div {
width: 100px;
<style>
.small-gray {
width: 100px;
height: 100px;
background-color: #ccc;
}
.big-blue {
width: 200px;
height: 200px;
background-color: #00f;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div></div>
<script>
$( "div" ).click(function() {
$( this ).toggleClass( "big-blue", 1000, "easeOutSine" );
});
</script>
</body>
</html>