To manage jQueryUI visual effects and to eliminate the specified classes to the matched elements while animating the style changes, the jQuery removeClass() method is used. Thus, the applied classes are eliminated from the elements.
Syntax 1: Basic syntax: Added in version 1.0:
.removeClass( className, [duration], [easing], [complete] )
Parameters:
- ClassName: Used to specify a string containing one or more CSS classes, where each CSS class is separated by space, in case there are multiple CSS classes.
- Duration: Used to define the time duration in milliseconds with a default value of 400. To take the element directly to the new style, without progress, the 0 value is passed to this parameter.
- Easing: Used to specify a string indicating the way to progress in the effect. The default value of this parameter is swing.
- Complete: Called for each element as a callback method when the effect is completed for this element.
Syntax 2: Added in version 1.9:
The children option is also supported by the new version 1.9 of jQueryUI. It also animates descendant elements.
.removeClass( className, [options] )
Parameters:
- className: Used to specify a string containing one or more CSS classes, where each CSS class is separated by space, in case there are multiple CSS classes.
- options: Used to specify all the animation settings, where each property is optional. It can take any value from the below-mentioned possible values:
- Duration: Used to specify a number or string to indicate the time duration of the effect in milliseconds with a default value of 400. To take the element directly to the new style, the 0 value is passed to this parameter.
- Easing: Used to specify a string to indicate how to progress in the effect. The default value of this parameter is swing.
- Complete: Called for each element as a callback method when the effect is completed for this element.
- Children: Used to specify a Boolean type value to determine whether the animation should additionally be applied to all descendants of the matched elements. The default value of this parameter is false.
- Queue: Used to specify a Boolean type or a string type value to determine whether to place the animation in the effects queue. The default value of this parameter is TRUE.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI addClass Example</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.element {
width: 200px;
height: 50px;
background-color: crimson;
color:white;
text-align:center;
}
.newClass {
font-size: 25px; background-color: white; color: crimson;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#Target').addClass("newClass", "fast")
} else {
$('#Target').removeClass("newClass", "fast")
}
})
});
</script>
</head>
<body>
<div id=Target class="element">
Hello World!!
</div>
<br>
<button class="button" id="add">Add New Class</button>
<button class="button" id="remove">Remove New Class</button>
</body>
</html>
Explanation:
In the above example, we are displaying the use and the behavior of the jQueryUI removeclass() method by passing a single class. Here, we created two buttons, one for adding a new class and one for removing the added class. On clicking the “Add New Class” button, we can add a new class to the selected element. The “Remove New Class” button is clicked to remove the added class. The newly added class is thus removed and the element switches back to the base class it belongs to.