Category: Effects

jQuery UI adds quite a bit of functionality on top of jQuery's built-in effects. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings. In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.

Blind Effect

The blind effect hides or shows an element by wrapping the element in a container, and “pulling the blinds”

Bounce Effect

The bounce effect bounces an element. When used with hide or show, the last or first bounce will also fade in/out.

Clip Effect

The clip effect will hide or show an element by clipping the element vertically or horizontally.

Drop Effect

The drop effect hides or shows an element fading in/out and sliding in a direction.

Explode Effect

The explode effect hides or shows an element by splitting it into pieces.

Fade Effect

The fade effect hides or shows an element by fading it.

Fold Effect

The fold effect hides or shows an element by folding it.

Highlight Effect

The highlight effect hides or shows an element by animating its background color first.

Puff Effect

Creates a puff effect by scaling the element up and hiding it at the same time.

Pulsate Effect

The pulsate effect hides or shows an element by pulsing it in or out.

Scale Effect

Shrink or grow an element by a percentage factor.

Shake Effect

Shakes the element multiple times, vertically or horizontally.

Size Effect

Resize an element to a specified width and height.

Also in: Effects Core

.switchClass()

Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.

Also in: Effects Core | Method Overrides

.toggleClass()

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.