CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」

iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。

そこで、jQueryのanimateメソッドと同じような記述をするとCSS3のtransition でアニメーションするjQueryプラグイン「jQuery transitionAnimate」を作成しました。

jQuery.transitionAnimate.js

新しいバージョンを「transitionAnimateをバージョンアップ」からダウンロード可能です

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

第一引数にはCSSの値を{height: "100px"}のようなオブジェクトで渡します。

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

第三引数には以下のようなeasing名を指定できます。

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

1~3までの引数は必須です省略できません

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

デモ(PC/safariとかGoogle Chromeとか)

$(function(){
	$("li").mouseover(function(){
		$(this).transitionAnimate({"width":"300px","height":"60px"},"500ms","ease-in",function(){
			$(this).css("background","blue");
		})
	}).mouseout(function(){
		$(this).transitionAnimate({"width":"200px","height":"10px"},"600ms","ease-in",function(){
			$(this).css("background","red");
		})
	})
})

デモ(iPhone/iPad)

$(function(){
	$("li").bind("touchstart",function(){
		$(this).transitionAnimate({"width":"300px","height":"60px"},"500ms","ease-in",function(){
			$(this).css("background","blue");
		})
	}).bind("touchend",function(){
		$(this).transitionAnimate({"width":"200px","height":"10px"},"600ms","ease-in",function(){
			$(this).css("background","red");
		})
	})
})

関連エントリー

iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
jQueryでiPhone/iPadの向きを検出する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
PC用とiPhone用のサイトを切り替える.htaccess
iPhone用CSSをメディアクエリで分岐する問題点
jQuery基礎文法最速マスター

スポンサードリンク

«[書評]JavaScriptプログラマのためのWebデザイン入門 | メイン | Web Designing (ウェブデザイニング)2010年 10月号 発売»