Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Color Animation
Toggle Class
Add Class
Remove Class
Switch Class
Effect
Toggle
Hide
Show
Utilities
Position
Widget
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

AddClass

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Run Effect

This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.

.addClass()

Categories: Effects | Effects Core | Method Overrides

.addClass( className [, duration ] [, easing ] [, complete ] )Returns: jQuery

Description: Adds the specified class(es) to each of the set of matched elements while animating all style changes.

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

    • className
      Type: String
      One or more class names (space separated) to be added to the class attribute of each matched element.
    • duration (default: 400)
      Type: Number or String
      A string or number determining how long the animation will run.
    • easing (default: swing)
      Type: String
      A string indicating which easing function to use for the transition.
    • complete
      Type: Function()
      A function to call once the animation is complete.

  • .addClass( className [, options ] )

    • className
      Type: String
      One or more class names (space separated) to be added to the class attribute of each matched element.
    • options
      Type: Object
      All animation settings. All properties are optional.
      • duration (default: 400)
        Type: Number or String
        A string or number determining how long the animation will run.
      • easing (default: swing)
        Type: String
        A string indicating which easing function to use for the transition.
      • complete
        Type: Function()
        A function to call once the animation is complete.
      • children (default: false)
        Type: Boolean
        Whether the animation should additionally be applied to all descendants of the matched elements. This feature should be used with caution as the cost of determining which descendants to animate can be very expensive, and grows linearly with the number of descendants.
      • queue (default: true)
        Type: Boolean or String
        A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.

Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript. All class animation methods, including .addClass(), support custom durations and easings, as well as providing a callback for when the animation completes.

Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation.

This plugin extends jQuery's built-in .addClass() method. If jQuery UI is not loaded, calling the .addClass() method may not fail directly, as the method still exists. However, the expected behavior will not occur.

Example:

Adds the class "big-blue" to the matched elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big-blue {
    width: 200px;
    height: 200px;
    background-color: #00f;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
 
<div></div>
 
<script>
$( "div" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});
</script>
 
</body>
</html>

Demo: