CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」
iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。
そこで、jQueryのanimateメソッドと同じような記述をするとCSS3のtransition でアニメーションするjQueryプラグイン「jQuery transitionAnimate」を作成しました。
新しいバージョンを「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");
})
})
})
$(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月号 発売»