日本語

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'});
click

ex2

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

You can set multiple css properties.

ex3

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

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});
click

Delay
Defalut is 0.0 second.

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

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

InOutInOutOutIn
SineeaseInSineeaseOutSineeaseInOutSineeaseOutInSine
QuadeaseInQuadeaseOutQuadeaseInOutQuadeaseOutInQuad
CubiceaseInCubiceaseOutCubiceaseInOutCubiceaseOutInCubic
QuarteaseInQuarteaseOutQuarteaseInOutQuarteaseOutInQuart
QuinteaseInQuinteaseOutQuinteaseInOutQuinteaseOutInQuint
ExpoeaseInExpoeaseOutExpoeaseInOutExpoeaseOutInExpo
CirceaseInCirceaseOutCirceaseInOutCirceaseOutInCirc

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

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

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'); });
click

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'); 
		}
	});
click

Multiple targets

You can set multiple targets

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

Pause, Stop

You can pause transition.

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

First click yellow, and then click blue.

click
pause

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

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

First click yellow, and then click blue.

click
stop