Search within TutorialsPark

jQuery UI Effects : CSS Classes


Learn how to use jQuery UI Class Methods of addClass(), removeClass() and toggleClass().


jQuery UI Effects : addClass() Method

The jQuery UI method of addClass() is used to add specified classes to each of the matched elements while animating all style changes.

Table: jQuery UI Methods addClass()

Option Description
className One or multiple class names seperated by space to be added to the class attribute of each matched element.
duration A string or number to set how long the animation should run
easing A string to denote which easing function to be used for transition
complete A function to be called once the animation is completed.

The demo below adds class which animates the CSS properties of letter-spacing, background, border, width, height, padding , margin and font-size

Example: jQuery UI Effect - addClass() Method

Example: jQuery UI Effect - addClass() Method

Give it a TRY! » Note: Run to add class which animates the specified properties.


jQuery UI Method removeClass()

The jQuery UI method of removeClass() is used to remove the specified class from each of the set of matched elements while animating the specified CSS properties.

All other options and parameters are similar to addClass() method. In the demo all the classes from the element are removed while animating the CSS styles.

Example: jQuery UI Methods - removeClass()

Give it a TRY! » Note: Click on Run button to see the animation effects


jQuery UI Method toggleClass()

The jQuery UI method of toggleClass() is used to add or remove one or multiple classes from each element in the set of matched element.

The parameter add/Remove is boolean option to specify whether CSS class should be added(true) or removed(false). If nothing is specified the present CSS class is removed

In the demo , the two classes are added and removed while animating the style changes.

Example: jQuery UI Methods - toggleClass()

Example: jQuery UI Methods - toggleClass()

Give it a TRY! » Note: Click on Run button to see the animation effects


jQuery UI Method switchClass()

The jQuery UI method of switchClass() is used to animate the transition by adding and removing the CSS classes at the same time.

The method supports all custom durations and easing effects, and even allows you to provide a callback when the animation is done. All other parameters are same as other method

Table: jQuery UI Methods addClass()

Option Description
removeClassName One or multiple class names seperated by space to be added to the class attribute of each matched element.
addClassName One or more class names to be added to the class attribute of each matched element.
duration A string or number to set how long the animation should run
easing A string to denote which easing function to be used for transition
complete A function to be called once the animation is completed.

Syntax : jQuery UI Methods - switchClass()

Example: jQuery UI Methods - switchClass()

Give it a TRY! » Note: Click on Run button to see the animation effects