jQuery UI addClass

The jQuery addclass() method is used to allow animating the changes to the CSS properties. It adds specified classes to the matched elements while animating all style changes.

Syntax:

Following is a basic syntax of jQuery UI addclass() method: (Added in version 1.0)

Parameters of addclass () 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 addClass 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 addclass() 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.

jQueryUI addclass() example 1

Let's take an example to demonstrate the jQueryUI addclass() method (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

jQuery UI addclass() example 2

Let's take an example to demonstrate the jQueryUI addclass() (Passing multiple classes)

 <!doctype html>
<html lang="en">
   <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>
      <!-- CSS -->
      <style>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   <body>
      <p id="welcome">You are here at- trainingtrains</p>
      <button class="button-1">Click here</button>
   </body>
</html>

Test it Now

Next TopicjQuery UI removeClass

← prev next →

jQuery

jQuery UI Tutorial

jQuery Interactions

jQuery Widgets

jQuery Effects

Interview Questions

jQuery UI addClass

jQueryUI addclass() example 1

jQuery UI addclass() example 2