JqueryUI - Switch Class, JqueryUI,
This chapter will discuss the switchClass() method, which is a useful new class for manipulation. switchClass() method move from one CSS one CSS class to another, animating the transition from one state to the other.Syntax
Added In Version 1.0 of jQueryUI
The switchClass() method has its basic syntax as follows −.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
| Sr.No. | Parameter & Description |
|---|---|
| 1 | removeClassName This is a String and represents the CSS class name, or space-delimited list of class names, to be removed. |
| 2 | addClassName This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element. |
| 3 | duration This is of type Number or String and optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400. |
| 4 | easing The name of the easing function to be passed to the animate() method. |
| 5 | complete This is a callback method called for each element when the effect is complete for this element. |
Added In Version 1.9 of jQueryUI
With version 1.9, this method now supports a children option, which will also animate descendant elements..switchClass( removeClassName, addClassName [, options ] )
| Sr.No. | Parameter & Description |
|---|---|
| 1 | removeClassName This is a String and represents the CSS class name, or space-delimited list of class names, to be removed. |
| 2 | addClassName This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element. |
| 3 | options This represents all animation settings. All properties are optional. Possible values are −
|
Examples
The following example demonstrates the use of switchClass() method.<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class 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>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>
