ratween CSS3 Transition jQuery plugin

This plugin makes elements CSS3 Transition.
MIT licence.
current ver 0.2.1
This plugin's author is KinkumaDesign

>>Download it from github.

Preparation

You must import jQuery and ratween. Then let's start.

	<script src="jquery-1.6.2.min.js"></script>
	<script src="ratween.js"></script>

Basics

You can set css property.

ex1

$('#basic1').ratween({left:'300px'});

ex2

$('#basic2').ratween({width:'300px'});

You can set multiple css properties.

ex3

$('#basic3').ratween({opacity:0.5,width:'100px',left:'400px'});

Options

You can set options. Such as time, easing, delay, and callback.

Time
Defalut is 1.0 second.

$('#options1').ratween({left:'400px'},{time:0.5});

Delay
Defalut is 0.0 second.

$('#options2').ratween({left:'400px'},{delay:2.0});

Easing
Defalut is lenear.
There are some easings in below table. You can use these strings.

	In	Out	InOut	OutIn
Sine	easeInSine	easeOutSine	easeInOutSine	easeOutInSine
Quad	easeInQuad	easeOutQuad	easeInOutQuad	easeOutInQuad
Cubic	easeInCubic	easeOutCubic	easeInOutCubic	easeOutInCubic
Quart	easeInQuart	easeOutQuart	easeInOutQuart	easeOutInQuart
Quint	easeInQuint	easeOutQuint	easeInOutQuint	easeOutInQuint
Expo	easeInExpo	easeOutExpo	easeInOutExpo	easeOutInExpo
Circ	easeInCirc	easeOutCirc	easeInOutCirc	easeOutInCirc

You can set these strings with uppercase or lowercase.
easeinsine, EASEINSINE, easeInsine are also OK.

$('#options3').ratween({left:'400px'},{easing:'easeInQuint'});

Caution!
I made these easings thinking about Tweener.easing.
But actually this plugin's easings and Tweener's those are not completely equal. These are nearly equal.
Because I used cubic curve-bezier to simulate easing expression. (see this site)
Cubic bezier curve can't simulate easing expression completely.
So if you change easing curve, try to change the curve value in source code.

Callback
It is triggered when transition is complete. Defalut is nothing.

$('#options4').ratween({left:'400px'},{callback:function(){ alert('Hello ratween'); });

You can set these options together.

	$('#options5').ratween({left:'400px',opacity:0},{
		time:0.5,
		delay:0.2,
		easing:'easeInOutcubic',
		callback:function(){ 
			alert('Hello ratween'); 
		}
	});

Multiple targets

You can set multiple targets

$('#multiple_targets div').ratween({left:'400px', opacity:0}, {time:0.5, easing:'easeinoutcubic'});

Pause, Stop

You can pause transition.

$('#pauseBtn').click(function(){
	$('#pauseTarget').ratween('pause');
});

First click yellow, and then click blue.

You can stop transition. Stop method is equal with forward.

$('#stopBtn').click(function(){
	$('#stopTarget').ratween('stop');
});

First click yellow, and then click blue.