Javatpoint Logo
Javatpoint Logo

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).

Test it Now

jQuery UI addclass() example 2

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

Test it Now



Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA