Interface elements for jQuery - Documentation - FX

Interface Effects

A collection of animated effects to be used on DOMelements extending the base effect collection of jQuery.

example

^

Pulsate

The element fades in and out for several times. Often used as a pattern to demonstrate that an element has been modified (usually via Ajax).

Options:

duration integer mandatory The duration in milliseconds of a single 'pulse'.
times integer optional Defines how many times the element should pulsate. duration x times = overall duration.
callback function optional Callback function that will get fired once the effect is completed.

Code sample:

$('#test').Pulsate(100, 7);
^

Slide

The element slides out/in of view into the given direction.

Possible methods to call: SlideInUp, SlideOutUp, SlideToggleUp, SlideInDown, SlideOutDown, SlideToggleDown, SlideInLeft, SlideToggleLeft, SlideOutLeft, SlideInRight, SlideOutRight and SlideToggleRight

Note: The old SlideUp, SlideDown, SlideLeft and SlideRight are available for backward compatibility

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').SlideInUp(500);
$('#test').SlideOutDown(500);
$('#test').SlideInLeft(500);
$('#test').SlideOutRight(500);
^

Shake

Horizontally shakes the element a number of times.

Options:

times integer optional Number of times the element is shaked.
callback function optional Callback function that will get fired once the effect is completed.

Code sample:

$('#test').Shake(2);
^

Blind

An alternative for the default 'slideDown' fx from jQuery distribution.

Possible methods to call: BlindUp, BlindDown, BlindLeft, BlindRight, BlindToggleVertically and BlindToggleHorizontally

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').BlindUp(500);
$('#test').BlindDown(500);
$('#test').BlindLeft(500);
$('#test').BlindLeft(500);
^

Fold

A combination of BlindUp and BlindLeft. The element is first blinded up and then to the left to simulate a folding effect.

Possible methods to call: Fold, UnFold and FoldToggle.

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
heightstop integer optional the minimum height the element can be folded to.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').Fold(500, 20);
$('#test').UnFold(500, 20);
^

ScrollTo

Scrolls the window to the specified element.

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#lastP').ScrollTo(800)
^

ScrollToAnchors

If set, each scroll to an anchor on your site will be animated.

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$("body").ScrollToAnchors(800)
^

Drop

The element disapears from its place by sliding to a direction and fades out.

Possible methods to call: DropInUp, DropOutUp, DropToggleUp, DropInDown, DropOutDown, DropToggleDown, DropInLeft, DropOutLeft, DropToggleLeft, DropInRight, DropOutRight and DropToggleRight

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').DropOutUp(500);
$('#test').DropOutDown(500);
$('#test').DropOutLeft(500);
$('#test').DropOutRight(500);
^

Open / Close / Switch

The element changes its height or width and its vertical or horizontal position simultaneously due to a pattern.

Possible methods to call: OpenVertically, OpenHorizontally, CloseVertically, CloseHorizontally, SwitchVertically and SwitchHorizontally.

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').OpenVertically(1000);
$('#test').OpenHorizontally(1000);
$('#test').CloseHorizontally(1000);
$('#test').CloseVertically(1000);
$('#test').SwitchVertically(1000);
$('#test').SwitchHorizontally(1000);
^

Bounce

The element bounces to the bottom.

Options:

height integer optional Defines how high the element bounces.
callback function optional Callback function that will get fired once the effect is completed.

Code sample:

$('#test').Bounce(70);
^

Transfer

Often used to visually indicate some activity from one element to another. For instance adding a product to a shopping cart.

Options (key/value pairs in a Object):

to string or DOMelement mandatory The DOMelement or element's Id to transfer to.
classname string optional The class applied to the transfer indicator.
duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
complete function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').transferTo(
    {
    	duration: 500; 
    	to: 'shoppingCart'; 
    	className: 'transferIndicator'
	}
);
^

Grow / Shrink

Resizes the element from the its center to simulate a growing or shrinking effect.

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').Grow(500);
$('#test').Shrink(500);
^

Puff

A combination effect of 'Grow' and 'FadeOut'.

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').Puff(500);
^

Highlight

Fades the background color from one color to another and then returns to its original state. If only one color is specified, it will fade back to the current background color.

Options:

duration integer or string mandatory The duration in milliseconds (or using ['slow' | 'normal' | 'fast']) of the effect.
color array or string mandatory The color to fade from back to the original color or an array with the start color and a custom end color.
callback function optional Callback function that will get fired once the effect is completed.
easing string optional The name of the easing effect you want to use.

Code sample:

$('#test').Highlight(500, '#900);

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb

Linux tutorials · Dedicated servers