jQuery UI framework provides switchClass() method which helps the programmers to switch from one CSS class to another along with managing transition from one state to another in a smooth manner. This method basically adds and removes defined classes along with animating the style definitions of CSS code.
$(selector).switchClass( removeClassName, addClassName, duration, easing, complete ).switchClass( removeClassName, addClassName, options )
- removeClassName: More than one classes are separated by space. The name of CSS class used for remove. The type is string.
- addClassName: More than one classes are separated by space. The name of the CSS class used for adding animation to all the selected elements.
- duration: The time or duration in milliseonds used for the animation effect to run. The default value is 400 ms. The types are number or string.
- easing: The options or settings used for animated easing effects. Default value is "swing".
- complete: This is the callback function which is executed when the visual effect is completed.
- children: The type is Boolean. This mentions if the animations should be applied to all the children or descendants of selected elements.
- queue: The types are string or Boolean. It mentions if the animations should be placed in the effects queue.
Links for jQuery UI:
Example 1: In the following example, we are demonstrating the switchClass() method using jQuery code and the visual effects are handled in HTML part of the page. The output image of the result is also shown below.
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jQuery.support Property
- jQuery | jquery Property
- jQuery UI | position() Method
- JQuery | parseHTML() method
- jQuery | css() Method
- jQuery | add() method with Example
- jQuery | not() method with Examples
- jQuery | ajaxStart() Method
- JQuery UI | Progressbar method
- jQuery | get() Method
- jQuery | fadeIn() Method
- jQuery | delegate() Method
- jQuery | outerHeight() Method
- jQuery | event.isDefaultPrevented() Method
- jQuery | outerWidth() Method
- jQuery | before() Method
- jQuery | off() Method
- jQuery | html() Method
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.