jQuery UI | switchClass() Method

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 )

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        rel = "stylesheet">
          
    <script src =
  
    <script src
    </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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        rel="stylesheet">
          
    <script src=
    </script>
      
    <script src=
    </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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.