jQuery UI addClass

by

To allow animating the changes to the CSS properties and to add specified classes to the matched elements while animating the changes, the jQuery addclass() method is used.

Syntax 1: Basic syntax: Added in version 1.0:
.addClass( 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 an 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.

Syntax:

.addClass( 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 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.
  • 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 value to determine whether to place the animation in the effects queue. The default value of this parameter is TRUE.
Example1:
<!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 behavior of the jQueryUI addclass() by passing a single class.

Example 2:
<!doctype html>
<html lang="en">
<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>
<!-- CSS -->
<style>
.crimson { color: crimson; }
.big { font-size: 3em; }
.spaced { padding: 0.5em; }
</style>
<script>
$(document).ready(function() {
$('.button').click(function() {
$( "#hello" ).addClass( "crimson big spaced", 1500 );
});
});
</script>
</head>
<body>
<p id="hello">Hello World!!</p>
<button class="button">Click Me</button>
</body>
</html>

Explanation:

In the above example, we are displaying the use and behavior of the jQueryUI addclass() by passing multiple classes.