jQuery UI removeClass

The jQuery removeClass() method is used to manage jQueryUI visual effects. It removes applied classes from the elements.

removeClass() method removes the specified classes to the matched elements while animating all style changes.

Syntax:

Following is a basic syntax of jQueryUI removeclass() method: (Added in version 1.0 of jQueryUI)

Parameters of removeClass() method:

ClassName: This is a string which contains one or more CSS classes. (In case of more CSS classes, they are separated by space.)
Duration:This is used to specify the time duration in milliseconds. The 0 value takes the element directly to the new style, without progress. Its default value is 400.
Easing: It is a type string and indicates the way to progress in the effect. Its default value is swing.
Complete: It is a callback method call for each element when the when the effect is completed for this element.

Syntax for jQuery removeClass 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 removeClass() method in version 1.9:

className:This is a string which contains one or more CSS classes. (In case of more CSS classes, they are separated by space.)

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

Duration:This is a type of number or string and indicates the time duration of the effect. It is counted in millisecond. The value of 0 takes the element directly in the new style, without progress. Its default value is 400.
Easing:It is a string. It specifies the way to progress in the effect. Its default value is swing.
Complete:It is a callback method called for each element when the effect is done 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.

jQuery UI removeclass example

Let's take an example to demonstrate the jQueryUI removeclass()(Passing single class)

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>jQuery UI addClass 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>
      <style>
         .elemClass {
            width: 300px;
            height: 100px;
            background-color: #76eec6;
         }
         .myClass {
            font-size: 30px; background-color: #eed5b7; color: #0000ee;
         }
      </style>
      <script type="text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   <body>
      <div id=animTarget class="elemClass">
         Hello! trainingtrains
      </div>
      <button class="button" id="add">Add Class</button>
      <button class="button" id="remove">Remove Class</button>
   </body>
</html>

Test it Now

Next TopicjQuery UI Switchclass

← prev next →

jQuery

jQuery UI Tutorial

jQuery Interactions

jQuery Widgets

jQuery Effects

Interview Questions

jQuery UI removeClass

jQuery UI removeclass example