jQuery UI | switchClass() Method

Last Updated : 29 Jan, 2022

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.
Syntax:

$(selector).switchClass( removeClassName, addClassName, 
                duration, easing, complete )


.switchClass( removeClassName, addClassName, options )
.switchClass( removeClassName, addClassName, options )

Parameters: 



   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 milliseconds 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: 



 <link

href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>

  <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>





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.

html

<!DOCTYPE html>
<html>
     
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1"> 
     
    <title>jQuery UI switchClass method</title>
 
    <!--Pre-compiled libraries -->
    <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>
        .finalClass {
            padding:10px 10px;
            font-family: Calibri;
            font-size: 24px;             
            font-weight: bold;
            color: red;
        }
        .initialClass {
            padding:10px 10px;
            font-family: Calibri;
            font-size: 18px;         
            font-weight: bold;
            color: green;
        }
        #divID{
        text-align:center;
        border:1px solid black;
        width:300px;
        height:100px;
        }
     
        .height{ 
            height: 10px;
        }
    </style>
         
    <script>
        $(function() {
            $('#switchBtnId').click(function() {
            $(".initialClass").switchClass(
                    "initialClass", "finalClass", '500');
                     
            $(".finalClass").switchClass(
                    "finalClass", "initialClass", '500');
                     
            return false;
            });
        });
    </script>
</head>
     
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
     
    <b>jQuery UI switchClass method</b>
     
    <div class="height"></div><br>
     
    <div id="divID">
        <div class = "initialClass">
            Learning jQuery UI !
        </div>
         
        <div class = "initialClass">
            Welcome to GFG website!
        </div>
    </div>
    <br />
     
    <input type = "button" id = "switchBtnId"
                value = "Click this" />
</body>
 
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
 
    <title>jQuery UI switchClass method</title>
     
    <!--Pre-compiled libraries -->
    <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>
        div {
            width: 100px;
            height: 100px;
            background-color: #e9e9e9;
            text-align: center;
            padding: 10px 10px;
        }
         
        .newClass {
            width: 200px;
            height: 200px;
        }
         
        .bgClass {
            background-color: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
     
    <b>jQuery UI switchClass method</b>
    <p></p>
     
    <div class="bgClass">Click this</div>
     
    <script>
        $("div").click(function() {
            $(this).switchClass("newClass",
                    "bgClass", 2000, "swing");
                     
            $(this).switchClass("bgClass",
                    "newClass", 2000, "swing");
        });
    </script>
</body>
 
</html>