Updated April 13, 2023
Introduction to jQuery switchClass()
jQuery switchClass() method used to adds and removes a specific class to matched elements while animating all style changes. The jQuery switchClass() method is a built in method in the jQuery UI library. In simple words the jQuery switchClass() method switch between one CSS class to another CSS class while animating all style changes.
Syntax and Parameters
The syntax of jQuery with Class() method of jQueryUI version 1.0 is:
switchClass(removeClassName, addClassName [, duration ] [, easing ] [, complete ]);Parameters:
- removeClassName: This parameter specified the names of one or more CSS class which are to be removed and it is passed as a string.
- addClassName: This parameter specified the names of one or more CSS class which are to be added to each matched element attribute and it is passed as a string.
- duration: This parameter specified the time duration in a millisecond and it is passed as a number or string. The default value of it is 400.
- easing: This parameter specified the name of the easing function to be called to the animate() method.
- complete: This parameter specified the name of a callback function which is to be called when each element effect is completed.
The syntax of jQuery swithClass() method of jQueryUI version 1.9 support children option also and animate descendant elements also, which is below as –
switchClass(removeClassName, addClassName [, options ]);Parameters:
- removeClassName: This parameter specified the names of one or more CSS class which are to be removed and it is passed as a string.
- addClassName: This parameter specified the names of one or more CSS class which are to be added to each matched element attribute and it is passed as a string.
- options: This parameter specified the animation settings. Which includes:
-
- duration: This parameter specified the time duration in a millisecond and it is passed as a number or string. The default value of it is 400.
- easing: This parameter specified the name of the easing function to be called to the animate() method. The default value of it is swing.
- complete: This parameter specified the name of a callback function which is to be called when each element effect is completed.
- children: This parameter specified whether the animation applies to all descendants or not of the match elements and it is passed as a Boolean. The default value of it is FALSE.
- queue: This parameter specified whether an animation is put in the effects queue or not and it is passed as a Boolean or string. The default value of it is TRUE.
- All the above properties are optional.
Examples of jQuery UI switchClass() Method
Next, we write the html code to understand the jQuery UI switchClass() method more clearly with the following example, where the switchClass() method will use to change the style class of the specified element of the selected element, as below.
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery switchClass() method </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>
.s1 {
width : 100px;
background-color : #ccc;
color : blue;
}
.s2 {
width : 200px;
background-color : #00f;
color : red;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h1" ).switchClass( "s1", "s2", "easeInOutQuad" );
});
});
</script>
</head>
<body>
<h1 class = "s1"> This is an sample heading element to change the style class. </h1>
<input type="button" id="Switch" value="Switch Class" />
</body>
</html>Output:
Once we click on the “switch class” button, the output is –
Example #2
Next example we rewrite the above code where in the jQuery UI switchClass() method use to change and change back the style class as in the below code –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery switchClass() method</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>
.s1 {
width: 100px;
background-color: #ccc;
color : blue;
}
.s2 {
width: 200px;
background-color: #00f;
color : red;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h1" ).switchClass( "s1", "s2", "fast" );
});
$('#Switchback').click( function() {
$( "h1" ).switchClass( "s2", "s1", "fast" );
});
});
</script>
</head>
<body>
<h1 class = "s1">This is an sample heading element to change the style class. </h1>
<input type="button" id="Switch" value="Switch Class" />
<input type="button" id="Switchback" value="Switch Back to Previous Class" />
</body>
</html>
An output of the above code is –Output:
Once we click on the “switch class” button, the output is –
And when we click on the “switch Back to Previous Class” button, the output is –
Example #3
Next example we rewrite the above code where in the jQuery UI switchClass() method use to change the style class with duration parameter, as in the below code.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery switchClass() method</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>
.s1 {
background-color: #ccc;
color : blue;
}
.s2 {
background-color: #00f;
color : red;
}
</style>
<script>
$(document).ready(function() {
$('#Switch').click( function() {
$( "h1" ).switchClass( "s1", "s2", 3000, "easeInOutQuad");
});
});
</script>
</head>
<body>
<h1 class = "s1">This is an sample heading element to change the style class.</h1>
<input type="button" id="Switch" value="Switch Class" />
</body>
</html>Output:
Once we click on the “switch class” button, the output is comes with 3000 milliseconds duration, as –
Recommended Articles
This is a guide to jQuery switchClass(). Here we also discuss the syntax and parameters of jQuery switchClass() along with different examples and its code implementation. you may also have a look at the following articles to learn more –
