Started

Selectors

Utilities

Animation

AJAX

CSS

Event

Manipulation

Cookie

String

Attributes

Data

Storage

Miscellaneous

$animate

Perform a custom animation of a set of CSS properties.
$animate( element, properties [, duration] [, callback] )
  1. element [object]
    The element will be animated.
  2. properties [object]
    The map of CSS properties will be move toward.
  3. duration (optional) [number]
    The duration of animation in milliseconds.
  4. callback (optional) [function]
    The callback function will be fired after the animation is completed.

Notes

The animation of Qatrix is based on CSS3 native transition function when available. And it will also enable hardware acceleration while changing the element position top and left. It is much more faster and smoother than other JavaScript based animation. In current, it do not support color transition on IE6-9.

Example

HTML code
<div id="box_wrap">
<div id="box">This is a box</div>
</div>
<div id="message"></div>
<button onclick="start_animation()">start animation</button>
CSS code
#box_wrap {
	height: 250px;
}

#box {
	width: 50px;
	height: 60px;
	font-size: 12px;
	background: #5599bb;
	padding: 5px;
}
JavaScript code
function start_animation()
{
	$text($('message'), '');
	$animate($("box"), {
		"width": {
			from: "50px",
			to: "600px"
		},
		"opacity": {
			from: 1,
			to: 0.5
		},
		"height" : {
			from: "50px",
			to: "200px"
		},
		"padding": "20px",
		"font-size": "24px"
	}, 500, function ()
	{
		$text(this, 'animation completed');
		$text($('message'), 'completed');
	});
}
Demonstration
This is a box