JqueryUI - Add Class-alljchome-开发者的教程家园

JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Add Class

This chapter will discuss the addClass() method, which is one of the methods used to manage jQueryUI visual effects. addClass() method allow animating the changes to the CSS properties.

addClass() method add specified classes to the matched elements while animating all style changes.

Syntax

Added In Version 1.0 of jQueryUI

The addClass() method has its basic syntax as follows −

.addClass( className [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className This is a String containing one or more CSS classes (separated by spaces).
2	duration This is of type Number or String, and indicates the number of milpseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.
3	easing This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.
4	complete This is a callback method called for each element when the effect is complete for this element.

Added In Version 1.9 of jQueryUI

With version 1.9, this method now supports a children option, which will also animate descendant elements.

.addClass( className [, options ] )

Sr.No.

Parameter & Description

className

This is a String containing one or more CSS classes (separated by spaces).

options

This represents all animation settings. All properties are optional. Possible values are −

duration − This is of type Number or String, and indicates the number of milpseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.

easing − This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.

complete − This is a callback method called for each element when the effect is complete for this element.

children − This is of type Boolean and represents whether the animation should additionally be appped to all descendants of the matched elements. Its default value is false.

queue − This is of type Boolean or String and represents whether to place the animation in the effects queue. Its default value is true.

Examples

The following example demonstrates the use of addClass() methods.

Passing single class

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
         rel = "stylesheet">
      <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>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $( .button ).cpck(function() {
               if (this.id == "add") {
                  $( #animTarget ).addClass("myClass", "fast")
               } else {
               $( #animTarget ).removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <span id = animTarget class = "elemClass">
         Hello!
      </span>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

Let us save the above code in an HTML file addclassexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −