Producing Effects with CSS Classes

jQuery methods for managing CSS classes have been improved in jQuery UI to manage the visual effects.

Values for the easing option (1)

Figure 14-16. Values for the easing option (1)

The addClass (), removeClass (), and toggleClass () Improved Methods

jQuery UI has also improved the addClass (), removeClass (), and toggleClass () methods provided by jQuery. The options for these classes are listed in Table 14-14.

The new form of the addClass () method is:

$(selector, context).addClass (className, duration, easing, callback);

The new form of the removeClass () method is:

$(selector, context).removeClass (className, duration, easing, callback);

The new form of the toggleClass () method is:

$(selector, context).toggleClass (className, addOrRemove, duration,
                                  easing, callback);
Values for the easing option (2)

Figure 14-17. Values for the easing option (2)

Table 14-14. The toggleClass () method parameters

Parameter

Function

className

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

duration

Indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progressivity.

easing

Indicates the way to progress in the effect.

callback

callback () method called for each element when the effect is complete for this element. This value in the function represents the DOM element for ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.