jQuery UI switchClass

The jQuery UI switchClass() method is used to move from one CSS class to another CSS class, animating the transition from one state to another state.

Syntax:

Let's see the basic syntax of jQueryUI swithClass() method: (Added in version 1.0 of jQueryUI)

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

Parameters of switchClass() method:

removeClassName: It is a string. It represents the CSS class name or space demarcated list of class names, to be removed.

addClassName: It is of type string. It represents one or more class names which are added to the class attribute of each matched element.

duration: This is of type number or string and used to specify the time duration in millisecond. Its default value is 400.

easing: It specifies the name of the easing function to be passed to the animate() method.

complete: It is a callback method called for each element when the effect is completed for this element.

Syntax for jQuery switchClass() method: (Added in version 1.9)

The new version 1.9 of jQueryUI also supports children option, which will also animate descendant elements.

Syntax:

Parameters of switchClass() method: (Added in version 1.9)

removeClassName: It is a string. It represents the CSS class name or space demarcated list of class names, to be removed.

addClassName:It is of type string. It represents one or more class names which are added to the class attribute of each matched element.

options: It is used to specify all animation settings. All properties are optional. Its possible values are:

Duration:This is a string or number. It specifies how long the animation will run. Its default value is 400.
Easing:It is a string which specifies the easing function used for transition. Its default value is swing.
Complete:It is a callback method called for each element when the effect is completed for this element.
Children: This is a Boolean type and specifies whether the animation should additionally be applied to all descendants of the matched elements. Its default value is FALSE.
Queue:This is of Boolean type or string type and specifies whether to place the animation in the effects queue. Its default value is TRUE.

Example of jQuery UI switch class()

Let's take an example of jQuery UI switchClass() method:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .LargeClass
         {
            font-family: NewTimesRoman;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass
         {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>
      <script>
         $(function() {
            $('#btnSwitch').click(function(){
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>
   <body>
      <div class="NormalClass">
        You are here at JavaTpoint
      </div>
      <div class="NormalClass">
JavaTpoint is commited to provide easy and point to point learning of various tutorials.
      </div>
      <br />
      <input type="button" id="btnSwitch" value="Switch Class" />
   </body>
</html>

Test it Now

Next TopicjQuery UI Animation

← prev next →