Interface elements for jQuery - Documentation - Animate

Animate

Interface overwrites the default 'animate' function with an extended one. The new 'animate' function brings several enhancements:

• Animates a collection of properties using one timer instead of using separate timers per property
• Handles color properties like 'backgroundColor', 'borderColor' etc.
• Animates styles and CSS classes

Code sample:

$('#test').animate(
	{
		left: 100,
		style: 'padding: 20px 30px; margin: 10px;',
		className: 'greenBorders',
		opacity: 0.4,
		backgroundColor: 'olive'
	},
	'slow'
);

example

Also, Interface offfers new functions to handle animations:

stop

Stop an animation at any time.

Options:

Code sample:

$('#test').stop();

stopAll

Stop current animation and clear all queued animations.

Options:

Code sample:

$('#test').stopAll();

pause

Add a pause between animations. The selection is not animated till the pausing time expires.

Options:

Code sample:

$('#test').pause(2000);