jQuery UI API - .removeClass()
Category
Effects | Effects Core | Method Overrides
Usage
Description: Removes a specified class from each element in the set of matched elements when the animation style changes.
Returns: jQuery
| Parameter | Type | Description | Default Value |
|---|---|---|---|
| className | String | One or more class names to be removed from the class attribute of each matched element, separated by spaces. | |
| duration | Number or String | A string or number specifying how long the animation will run. | 400 |
| easing | String | A string indicating which easing function to use. | swing |
| complete | Function() | A function to be called once the animation is complete. |
| Parameter | Type | Description |
|---|---|---|
| className | String | One or more class names to be removed from the class attribute of each matched element, separated by spaces. |
| options | Object | All animation settings. All properties are optional. duration (default: 400)<br> Type: Number or String<br> Description: A string or number specifying how long the animation will run.<br> easing (default: swing)<br> Type: String<br> Description: A string indicating which easing function to use.<br> complete<br> Type: Function()<br> Description: A function to be called once the animation is complete.<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 determining whether an element is an animated descendant is costly and grows linearly with the number of descendants.<br> queue (default: true)<br> Type: Boolean or String<br> Description: A boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. Since 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 handled through CSS rather than JavaScript. All class animation methods, including .removeClass(), allow customization of animation duration and easing functions, and provide a callback upon animation completion.
Not all styles can be animated. For example, animating background images. Any styles that cannot be animated will change at the end of the animation.
This plugin extends jQuery's built-in .removeClass() method. If jQuery UI is not loaded, calling .removeClass() will not fail directly because the method exists in jQuery. However, the expected behavior will not occur.
Example
Remove the class "big-blue" from the matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.removeClass() Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
div {
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 class="big-blue"></div>
<script>
$( "div" ).click(function() {
$( this ).removeClass( "big-blue", 1000, "easeInBack" );
});
</script>
</body>
</html>
</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 class="big-blue"></div>
<script>
$( "div" ).click(function() {
$( this ).removeClass( "big-blue", 1000, "easeInBack" );
});
</script>
</body>
</html>