ratween CSS3 Transition jQuery plugin

要素にCSS3トランジションを適用します。
MIT ライセンスです。
current ver 0.2.1
作者はKinkumaDesignです。

>>githubからダウンロードする

準備

jQuery と ratweenをインポートします。始めましょう！

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

基本

CSSプロパティをセットできます。

サンプル１

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

サンプル２

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

複数のCSSプロパティをセットできます。

サンプル３

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

オプション

オプションをセットできます。アニメーションの時間、イージング、遅延時間、関数呼び出しです。

時間
初期設定は 1.0秒です。

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

遅延時間
初期設定は 0.0秒です。

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

イージング
初期設定はlenearです。
lenearの他に下の表にあるように、いくつかのイージングがあります。

	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

大文字、小文字をどちらでも使って書くことが可能です。
easeinsine, EASEINSINE, easeInsine などと買いても大丈夫です。

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

注意
このイージングを作るときに、Tweenerのイージングをイメージしていました。
ですが、実際にはこのプラグインのイージングとTweenerのそれとは全く同じものではありません。
なぜなら、ベジェカーブを使って書いているためです。(このサイトを見てみてください。)
これと同じ仕組みを使って、Tweenerのイージングに近い値をとっています。
もしイージングの値を変更したい場合は、ソースコードの値を書き換えてください。

終了時関数呼び出し
初期設定なし。

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

オプションを同時に使うことが可能です。

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

複数のターゲット指定

複数のターゲットを指定することが可能です。

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

一時停止、終了

アニメーションの一時停止が可能です。

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

黄色の後に、青色を押してください。

終了することが可能です。終了は、早送りと同じです。

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

黄色の後に、青色を押してください。