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:$(".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:$(".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:
<!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 =
rel = "stylesheet">
<script src =
<script src =
<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:
<style>.red{background:red;width:400px;}.font{font-size:3em;text-align :center;}.padding {padding:1em;}.border {border:2pxsolidblack;border-radius:25px;}</style> -
jQuery Code:
<script>$(document).ready(function() {$('.btnClass').click(function() {$("#paraId").addClass("red font padding border", 2500 );});});</script>
Final Solution:
<!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=
rel="stylesheet">
<script src=
<script src=
</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:
<style>.height {height:10px;}.parent {width:500px;height:250px;position:relative;}#btnClick {padding: .5em1em;text-decoration:none;}#container {width:380px;height:210px;padding:1em;color:#2d2d2d;border:1pxsolidblack;background:#b3b3b3;}.newClass {text-indent:20px;letter-spacing: .2em;width:380px;height:210px;padding:20px;margin:10px;font-size:1.1em;}</style> -
jQuery Code:
<script>$(document).ready(function() {$("#btnClick").on("click",function() {$("#container").addClass("newClass", 4000, callback );});functioncallback() {setTimeout(function() {$("#container").removeClass("newClass");}, 4000 );}});</script>
Final Solution:
<!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 =
rel = "stylesheet">
<script src =
<script src =
<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: