アニメーションをCSS3のtransitionで行う「jQuery transition Animate」-JavaScript Library Archive

アニメーションをCSS3のtransitionで行う「jQuery transition Animate」

配布元：CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R]
ライセンス：MITライセンス

「jQuery transition Animate」はCSS3のtransitionアニメーションを利用するためのjQueryプラグインです。jQueryではanimateメソッドがありますが負荷が高く、iPhone / iPad / Androidなどに搭載されているMobile Safariではスムーズに動かないこともあります。そういった際に利用できるのがこのライブラリです。

利用方法

記述方法はtransitionAnimateメソッドで指定しanimateメソッドと同じように記述します。

$(セレクタ).transitionAnimate(params, duration, easing, [callback])

第一引数のparamsはCSSの値を{height: “100px”}のようなオブジェクトで指定します。

第二引数にはアニメーションの動作時間が指定できます。1sのような秒での指定と500msのようなミリ秒での指定ができます。normalとかslowは動きません。

第三引数には次のようなeasing名が指定できます。

ease ：滑らかに始まり滑らかに終わる
linear：一定
ease-in：ゆっくり始まる
ease-out：ゆっくり終わる
ease-in-out：ゆっくり始まってゆっくり終わる

第一～第三までの引数は必須ですので省略できません。

第四引数にコールバック関数が指定できます。

$(function(){
	$("div").toggle(function(){
		$(this).transitionAnimate({"width":"300px","height":"300px"},"500ms","ease-in",function(){
			$(this).css("background","blue");
		})
	},function(){
		$(this).transitionAnimate({"width":"100px","height":"100px"},"600ms","ease-in",function(){
			$(this).css("background","red");
		})
	})
})

サンプル