jQuery UI | addClass() Method
Last Updated :
28 Apr, 2025
The
addClass() method is an inbuilt method in jQuery UI framework which is used to manage user interface visual effects. This method adds class to all selected elements along with animating all the defined styles in CSS properties. It basically manages animation methods for text-indentation, width, height, padding, margins, font-sizes and letter spacing providing a smooth transitions of effects.
Syntax:
$(selector).addClass(className, options);
Parameters: This method accepts two parameters as mentioned above and described below:
- className: This parameter holds the class name which need to be added.
- options: It is an optional parameter.
Return Value: It returns the selected elements with added new class name.
Options:
- duration: This option allows you to choose the time duration of the visual effect in milliseconds. The type is number or string and default value is 400.
Syntax:
javascript
$(".selector").addClass(className, "fast");
- easing: This option say what kind of easing or progress you want for the visual effect . The type is string and default value is swing.
Syntax:
javascript
$(".selector").addClass(className, "easeOutBounce");
- complete: This option is the callback method which is called for each matched element after the visual effect is completed. The type is function.
- children: This option tells if the visual effect or animation is applied to all its descendants. The type is boolean and the default value is false.
- queue: This option tells if the visual effect or animation is placed in the effects queue. The type is boolean or string and the default value is true.
Links for jQuery UI:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />
jQuery code to show the working of this method with single class :
Example 1:
html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<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>
.welcomeClass {
width: 200px;
height: 50px;
text-align:center;
padding :10px 10px 10px 10px;
background-color: lightgreen;
border: 2px solid green;
}
.newClass {
font-size: 40px;
background-color: #cccccc;
color: red;
}
.highlight {
color:#090;
font-family:Calibri;
font-size:2em;
text-shadow:2px 2px #FF0000;
}
.height{ height: 10px;}
.square {
width: 100px;
height: 100px;
text-align: center;
padding :8px 10px 8px 10px;
background-color: #cccccc;
}
.easing-square {
width: 200px;
height: 200px;
padding: 20px;
background-color: lightgreen;
border: 2px solid green;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('.btnClass').click(function() {
if (this.id == "addID") {
$('#welcomeId').addClass(
"newClass", "fast")
}
else {
$('#welcomeId').removeClass(
"newClass", "fast")
}
})
$( ".square" ).click(function() {
$( this ).addClass( "easing-square",
700, "swing" );
$( this ).text("addclass() method "
+ "executed successfully!");
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b class="highlight">
jQuery UI addClass method
</b>
<div class="height"></div><br>
<div id = welcomeId class = "welcomeClass">
Welcome !
</div>
<div class="height"></div><br>
<button class = "btnClass" id = "addID">
Add Class
</button>
<button class = "btnClass" id = "removeID">
Remove Class
</button>
<div class="height"> </div><br>
<div class="square" >Click this </div>
</body>
</html>
In the above example, the selected elements are:
"b" and
"div". The "highlight" class is applied on element
"b".
"newClass" class is applied on element "div" with id
welcomeId. “easing-square” class is applied on element "div" with class
square with the help of .addClass() method of jQuery UI.
Output:
jQuery code to show the working of this method with multiple classes:
Designing structure: In the following code, the element
"p" is selected and classes namely
"red",
"font",
"padding" and
"border" are added with the help of
.addClass() method of jQuery UI. The following CSS code is for defining all the classes for the "p" element and also for designing the user interface part. The following jQuery code is for managing click event and adding multiple classes to the selected element.
Note: Multiple classes are separated by a space in the
addClass() method.
- CSS Code:
CSS
<style>
.red {
background: red;
width:400px;
}
.font{
font-size: 3em;
text-align : center;
}
.padding {
padding: 1em;
}
.border {
border: 2px solid black;
border-radius: 25px;
}
</style>
- jQuery Code:
javascript
<script>
$(document).ready(function() {
$('.btnClass').click(function() {
$( "#paraId" ).addClass(
"red font padding border", 2500 );
});
});
</script>
Final Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>
jQuery UI adding multiple classes
</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"http://code.jquery.com/jquery-1.10.2.js"></script>
<script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.red {
background: red;
width:400px;
}
.font {
font-size: 3em;
text-align : center;
}
.padding {
padding: 1em;
}
.border {
border: 2px solid black;
border-radius: 25px;
}
</style>
<script>
$(document).ready(function() {
$('.btnClass').click(function() {
$( "#paraId" ).addClass(
"red font padding border", 2500 );
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>jQuery UI adding multiple classes</b>
<div class="height"></div>
<p id="paraId">GFG website</p>
<button class="btnClass">
Click this
</button>
</body>
</html>
Output:
jQuery code to show the working of this method with callback method:
- CSS Code:
CSS
<style>
.height {
height: 10px;
}
.parent {
width: 500px;
height: 250px;
position: relative;
}
#btnClick {
padding: .5em 1em;
text-decoration: none;
}
#container {
width: 380px;
height: 210px;
padding: 1em;
color: #2d2d2d;
border: 1px solid black;
background: #b3b3b3;
}
.newClass {
text-indent: 20px;
letter-spacing: .2em;
width: 380px;
height: 210px;
padding: 20px;
margin: 10px;
font-size: 1.1em;
}
</style>
- jQuery Code:
javascript
<script>
$(document).ready(function() {
$( "#btnClick" ).on( "click", function() {
$( "#container" ).addClass(
"newClass", 4000, callback );
});
function callback() {
setTimeout(function() {
$( "#container" ).removeClass( "newClass" );
}, 4000 );
}
});
</script>
Final Solution:
html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<title>jQuery UI addClass with callback</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>
.height {
height: 10px;
}
.parent {
width: 500px;
height: 250px;
position: relative;
}
#btnClick {
padding: .5em 1em;
text-decoration: none;
}
#container {
width: 380px;
height: 210px;
padding: 1em;
color: #2d2d2d;
border: 1px solid black;
background: #b3b3b3;
}
.newClass {
text-indent: 20px;
letter-spacing: .2em;
width: 380px;
height: 210px;
padding: 20px;
margin: 10px;
font-size: 1.1em;
}
</style>
<script>
$(document).ready(function() {
$( "#btnClick" ).on( "click", function() {
$( "#container" ).addClass(
"newClass", 4000, callback );
});
function callback() {
setTimeout(function() {
$( "#container" ).removeClass( "newClass" );
}, 4000 );
}
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI add Class method with callback</b>
<div class="height"></div><br>
<div class="parent">
<div id="container">
This is to demonstrate jQuery
UI addClass method with
removeClass callback method.
</div>
</div>
<button id="btnClick">
Click to execute
</button>
</body>
</html>
In the above code, the “div” element with id container is selected and with the help of .addClass() function a new class is added to the selected "div" element. The callback function is also executed with the help of .removeClass() method of jQuery UI.
Output:
Similar Reads
jQuery addClass() Method
The addClass() method is an inbuilt method in jQuery that is used to add more properties to each selected element. It can also be used to change the property of the selected element. This method can be used in two different ways: 1) By adding a Class name directly: Here, the Class name can be used d
2 min read
jQuery hasClass() Method
The hasClass() is an inbuilt method in jQuery which check whether the elements with the specified class name exist or not. Syntax: $(selector).hasClass(className);Parameter: It accepts a "className" parameter which specifies the class name needed to search in the selected element. Return Value: It r
1 min read
jQuery add() method
The jQuery add() method is used to add elements to the existing group of elements. This method can add element to the whole document, or just inside the context element if the context parameter is defined. Syntax: $(selector).add(element, context_parameter) Here selector helps to find the matching e
1 min read
jQuery callbacks.add() Method
The jQuery callbacks.add() method is used to add a callback or a collection of callbacks to a callback list. This method returns the callback object onto which it is attached (this).Syntax: callbacks.add(callbacks)Parameters: callbacks: This parameter holds a function, or an array of functions, that
2 min read
jQuery UI Menu classes Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Menu classes option is used to add the additional classes to add widget elements. Syntax: $( ".selector" ).menu({ class
1 min read
jQuery delegate() Method
jQuery delegate() Method in jQuery is used to add one or more event handlers to the specified element that are children of selected elements and is also used to specify a function to run whenever the event occurs. Syntax:$(selector).delegate( childSelector, event, data, function )Parameters: This me
2 min read
jQuery UI Menu enable() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI Menu enable() method is
2 min read
p5.Element addClass() Method
The addClass() method of p5.Element in p5.js is used to add the specified class to an element. An element can have multiple classes assigned to it. Also, one class can be specified to multiple elements on the page.Syntax:addClass(class)Parameters: This function accepts a single parameter as mentione
2 min read
jQuery .class Selector
The jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery UI Tabs instance() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Tabs widget is used to create a single content area with multiple panels that are associated with a header in a list. T
3 min read