W3cubDocs

/jQuery UI

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.

.addClass()

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

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.

.cssClip()

Getter/setter for an object version of the CSS clip property.

Drop Effect

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

Easings

Easing functions specify the speed at which an animation progresses at different points within the animation.

.effect()

Apply an animation effect to an element.

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.

.hide()

Hide the matched elements, using custom effects.

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.

.removeClass()

Removes the specified class(es) from each of the set of matched elements while animating all style changes.

Scale Effect

Shrink or grow an element by a percentage factor.

Shake Effect

Shakes the element multiple times, vertically or horizontally.

.show()

Display the matched elements, using custom effects.

Size Effect

Resize an element to a specified width and height.

.switchClass()

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

.toggle()

Display or hide the matched elements, using custom effects.

.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.

.transfer()

Transfers the outline of an element to another element

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jqueryui.com/category/effects