.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] ) Returns: jQuery
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument, while animating all style changes.
-
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
-
classNameType: StringOne or more class names (space separated) to be toggled for each element in the matched set.
-
switchType: BooleanA boolean value to determine whether the class should be added or removed.
-
duration (default:
400
)A string or number determining how long the animation will run. -
easing (default:
swing
)Type: StringA string indicating which easing function to use for the transition. -
completeType: Function()A function to call once the animation is complete.
-
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 .toggleClass()
, 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 .toggleClass()
method. If jQuery UI is not loaded, calling the .toggleClass()
method may not fail directly, as the method still exists. However, the expected behavior will not occur.
Example:
Toggles the class "big-blue" for 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
|
|