jQuery UI Switch Class

by

To move from one CSS class to another CSS class, the jQuery UI switchClass() method is used. It thus animates the transition from one state to another state. It means that there is no need to use both the jQuery addclass() method and the jQuery removeclass() method in a code for a single element. Only a single method, i.e. the jQuery UI switchClass() method can be used to serve this purpose. Thus, saving the number of lines of code and making it easy to understand.

Syntax 1: Basic syntax: Added in version 1.0:
.switchClass( removeClassName, addClassName, [duration], [easing], [complete] )

Parameters:

  • removeClassName: Used to specify a string to indicate the CSS class name or space-demarcated list of class names, to be removed.
  • addClassName: Used to specify a string to indicate one or more class names that are added to the class attribute of each matched element.
  • Duration: Used to specify a number or string to define the time duration in milliseconds with a default value of 400.
  • Easing: Used to define the name of the easing function to be passed to the animate() method.
  • Complete: Called for each element as a callback method when the effect is completed for this 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.

.switchClass( removeClassName, addClassName [, options ] )

Parameters:

  • removeClassName: Used to specify a string to indicate the CSS class name or space-demarcated list of class names, to be removed.
  • addClassName: Used to specify a string to indicate one or more class names that are added to the class attribute of each matched element.
  • 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 string or a number to define the duration for which the animation will run with a default value of 400.
  • Easing: Used to specify a string to indicate the easing function used for transition. 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 or a string type value to determine whether to place the animation in the effects queue. The default value of this parameter is TRUE.

Example:

<!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>
.Large
{
font-family: cursive;
font-size: large;
font-weight: bold;
color: crimson;
}
.Normal
{
font-family: fantasy;
font-size: small;
color: brown;
}
</style>
<script>
$(function() {
$('#btn').click(function(){
$(".Normal").switchClass("Normal","Large",'fast');
$(".Large").switchClass("Large","Normal",'fast');
return false;
});
});
</script>
</head>
<body>
<div class="Normal">
Message for you:
</div>
<div class="Normal">
Hello World!!
</div>
<br />
<input type="button" id="btn" value="Switch Class" />
</body>
</html>

Explanation:

In the above example, we are displaying the use and behavior of the jQuery UI switchClass() method. Here, we only have a single button both to add a new class or to remove a new class, thus switching the classes on every click.