JqueryUI Switch Class - JqueryUI

How to use Switch class method in JqueryUI?

The switchClass() method. This method is a new class that can be used for operations. The switchClass() method moves from one CSS class to another, and animates the transition from one state to another.

Syntax

Added In Version 1.0 of jQueryUI

The switchClass() method has its basic syntax as follows:

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 ofslow, normal, fast,or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is400.
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

In version 1.9, this method supports the children option, and the children option also animates child elements.

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 −
  • duration− A string or number determining how long the animation will run.. Its default value is400.
  • easing− A string indicating which easing function to use for the transition. Its default value isswing. Possible values arehere.
  • complete− This is a callback method called for each element when the effect is complete for this element.
  • children− This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements.
  • queue− This is of type String/Boolean indicating whether to place the animation in the effects queue..

Examples

The following example shows the use of switchClass() method.

Save the above code in an HTML file called switchclassexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

To see the effect of the box class, click the Switch class button.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

JqueryUI Topics