jQuery UI | addClass() Method

The addClass() method is an inbuilt method in jQuery UI framework which is used to manage user interface visual effects. This method adds class to all selected elements along with animating all the defined styles in CSS properties. It basically manages animation methods for text-indentation, width, height, padding, margins, font-sizes and letter spacing providing a smooth transitions of effects.

Syntax:

$(selector).addClass(className, options);

Parameters: This method accepts two parameters as mentioned above and described below:

  • className: This parameter holds the class name which need to be added.
  • options: It is an optional parameter.

Return Value: It returns the selected elements with added new class name.

Options:



  • duration: This option allows you to choose the time duration of the visual effect in milliseconds. The type is number or string and default value is 400.
    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    $(".selector").addClass(className, "fast");  

    chevron_right

    
    

  • easing: This option say what kind of easing or progress you want for the visual effect . The type is string and default value is swing.
    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    $(".selector").addClass(className, "easeOutBounce");  

    chevron_right

    
    

  • complete: This option is the callback method which is called for each matched element after the visual effect is completed. The type is function.
  • children: This option tells if the visual effect or animation is applied to all its descendants. The type is boolean and the default value is false.
  • queue: This option tells if the visual effect or animation is placed in the effects queue. The type is boolean or string and the default value is true.

Links for jQuery UI:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

jQuery code to show the working of this method with single class :
Example 1:

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 addClass() Example</title>
      
    <link href =
        rel = "stylesheet">
          
    <script src
    <script src
      
    <style>
        .welcomeClass {
            width: 200px;
            height: 50px;
            text-align:center;
            padding :10px 10px 10px 10px;
            background-color: lightgreen;
            border: 2px solid green;
        }
        .newClass {
            font-size: 40px;
            background-color: #cccccc;
            color: red;
        }
        .highlight {
            color:#090;
            font-family:Calibri;         
            font-size:2em;
            text-shadow:2px 2px #FF0000;
        }
        .height{ height: 10px;}
        .square {
            width: 100px;
            height: 100px;
            text-align: center;
            padding :8px 10px 8px 10px;
            background-color: #cccccc;       
        }
          
        .easing-square {
            width: 200px;
            height: 200px;
            padding: 20px;
            background-color: lightgreen;
            border: 2px solid green; 
        }
    </style>
      
    <script type = "text/javascript">
      
        $(document).ready(function() {
            $('.btnClass').click(function() {
                if (this.id == "addID") {
                    $('#welcomeId').addClass(
                            "newClass", "fast")
                
                else {
                    $('#welcomeId').removeClass(
                            "newClass", "fast")
                }
            })
              
            $( ".square" ).click(function() {
                $( this ).addClass( "easing-square",
                                    700, "swing" );
                $( this ).text("addclass() method "
                        + "executed successfully!");
            }); 
        });
    </script>
</head
  
<body>   
    <h1 style="color:green">
        GeeksforGeeks
    </h1
      
    <b class="highlight">
        jQuery UI addClass method
    </b>
      
    <div class="height"></div><br>
      
    <div id = welcomeId class = "welcomeClass">
        Welcome !
    </div>
    <div class="height"></div><br>
      
    <button class = "btnClass" id = "addID">
        Add Class
    </button>
      
    <button class = "btnClass" id = "removeID">
        Remove Class
    </button>
      
    <div class="height"> </div><br>
    <div class="square" >Click this </div>
</body>
  
</html>

chevron_right


In the above example, the selected elements are: “b” and “div”. The “highlight” class is applied on element “b”. “newClass” class is applied on element “div” with id welcomeId. “easing-square” class is applied on element “div” with class square with the help of .addClass() method of jQuery UI.
Output:

jQuery code to show the working of this method with multiple classes:

Designing structure: In the following code, the element “p” is selected and classes namely “red”, “font”, “padding” and “border” are added with the help of .addClass() method of jQuery UI. The following CSS code is for defining all the classes for the “p” element and also for designing the user interface part. The following jQuery code is for managing click event and adding multiple classes to the selected element.



Note: Multiple classes are separated by a space in the addClass() method.

  • CSS Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        .red
            background: red
            width:400px;          
        }          
          
        .font{ 
            font-size: 3em;
            text-align : center;
        }  
          
        .padding { 
           padding: 1em
        }  
          
        .border {
            border: 2px solid black;
            border-radius: 25px;
        }
    </style>

    chevron_right

    
    

  • jQuery Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        $(document).ready(function() {  
            $('.btnClass').click(function() {  
                $( "#paraId" ).addClass(
                    "red font padding border", 2500 );  
            });                
        }); 
    </script> 

    chevron_right

    
    

Final Solution:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en">
       
<head
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
      
    <title>
        jQuery UI adding multiple classes
    </title
      
    <link href=
        rel="stylesheet"
          
    <script src=
  
    <script src=
    </script
      
    <style
        .red { 
            background: red; 
            width:400px;         
        }        
          
        .font { 
            font-size: 3em;
            text-align : center;
        
          
        .padding { 
            padding: 1em; 
        
          
        .border {
            border: 2px solid black;
            border-radius: 25px;
        }
    </style
      
    <script
        $(document).ready(function() { 
            $('.btnClass').click(function() { 
                $( "#paraId" ).addClass( 
                    "red font padding border", 2500 ); 
            });  
        });
    </script
</head
  
<body
    <h1 style="color:green">
        GeeksforGeeks
    </h1
      
    <b>jQuery UI adding multiple classes</b>
      
    <div class="height"></div
      
    <p id="paraId">GFG website</p
      
    <button class="btnClass">
        Click this
    </button>        
</body
  
</html>

chevron_right


Output:

jQuery code to show the working of this method with callback method:

  • CSS Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        .height { 
            height: 10px;
        }        
          
        .parent { 
            width: 500px;
            height: 250px
            position: relative;
        }
          
        #btnClick { 
            padding: .5em 1em;
            text-decoration: none;
        }
          
        #container { 
            width: 380px;
            height: 210px
            padding: 1em;
            color: #2d2d2d;          
            border: 1px solid black
            background: #b3b3b3;           
        }
          
        .newClass { 
            text-indent: 20px
            letter-spacing: .2em;
            width: 380px
            height: 210px
            padding: 20px
            margin: 10px
            font-size: 1.1em;
        }    
    </style>

    chevron_right

    
    

  • jQuery Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        $(document).ready(function() {
            $( "#btnClick" ).on( "click", function() {
                $( "#container" ).addClass(
                        "newClass", 4000, callback );
            });
       
            function callback() {
                setTimeout(function() {
                    $( "#container" ).removeClass( "newClass" );
                }, 4000 );
            }            
        });
    </script>

    chevron_right

    
    

Final Solution:

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 addClass with callback</title>
      
    <link href
        rel = "stylesheet">
    <script src
    <script src
      
    <style>
        .height { 
            height: 10px;
        }        
          
        .parent { 
            width: 500px;
            height: 250px; 
            position: relative;
        }
          
        #btnClick { 
            padding: .5em 1em;
            text-decoration: none;
        }
          
        #container { 
            width: 380px;
            height: 210px; 
            padding: 1em;
            color: #2d2d2d;          
            border: 1px solid black; 
            background: #b3b3b3;           
        }
          
        .newClass { 
            text-indent: 20px; 
            letter-spacing: .2em;
            width: 380px; 
            height: 210px; 
            padding: 20px; 
            margin: 10px; 
            font-size: 1.1em;
        }    
    </style>
  
    <script>
        $(document).ready(function() {
            $( "#btnClick" ).on( "click", function() {
                $( "#container" ).addClass(
                        "newClass", 4000, callback );
            });
       
            function callback() {
                setTimeout(function() {
                    $( "#container" ).removeClass( "newClass" );
                }, 4000 );
            }            
        });
    </script>
</head>
      
<body>
    <h1 style="color:green">GeeksforGeeks</h1
      
    <b>jQuery UI add Class method with callback</b>
      
    <div class="height"></div><br>
          
    <div class="parent">
        <div id="container">
            This is to demonstrate jQuery 
            UI addClass method with
            removeClass callback method.
        </div>
    </div>
      
    <button id="btnClick">
        Click to execute
    </button>
</body>
  
</html>

chevron_right


In the above code, the “div” element with id container is selected and with the help of .addClass() function a new class is added to the selected “div” element. The callback function is also executed with the help of .removeClass() method of jQuery UI.

Output:

full-stack-img




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.