jQuery UI

Chapter 14. Visual Effects in jQuery UI

jQuery supports the use of basic visual effects, including management of the opacity and height of the elements, as well as the management of new effects using the animate () method.

jQuery UI also provides the following:

• New visual effects

• Improvement of the animate () method

• The ability to use CSS classes to produce effects

New Visual Effects

In addition to the slideUp, slideDown, slideToggle, fadeIn, fadeOut, fadeTo, show, hide, and toggle effects available in standard jQuery, jQuery UI offers a range of new visual effects. All these effects can be used by calling the new effect (effectName, options, duration, callback) method, which works on jQuery class objects returned by jQuery ().

The effect (effectName, options, duration, callback) Method

The effect (effectName, options, duration, callback) method is used in the following form:

$(selector, context).effect (effectName, options, duration, callback)

This method allows us to produce the basic visual effects of jQuery UI. The parameters of the method are listed in Table 14-1 (only the first parameter is mandatory).

Table 14-1. The effect () method parameters

Parameter	Function
effectName	String corresponding to the effect name to use ("blind", "bounce", etc.).
optionscallback () method called for each element when the effect is complete for this element. The this value in the function represents the DOM element for which the effect is complete.callback () method called for each element when the effect ...