【jQuery】animate関数の仕様と使い方

jQueryではjavascriptで出来なかったエフェクトの実装が簡単に出来るようになりました。
中でも要素にアニメーションを付加するanimate関数は、他のものとは違い自作のアニメーションが作れる関数です。animate関数の使い方を覚えれば自分の好みに合ったアニメーションが作れ、Webページをよりリッチなものと出来ます。
今回はこのanimete関数の使い方と仕様をまとめましたので紹介します。
animate関数の仕様
animate(params, [duration], [easing], [callback])
[ ]で括られている引数は省略可能です。
animate関数は指定したパラメータによって、形や動きにアニメーションを与えることが出来ますが、全てのプロパティが使用できるわけではありません。
animate関数で利用できるプロパティは数値を扱うプロパティのみとなります。例えば「left:100px;」や「width:100px」「opacity:0.5」などが対象となります。
数値を扱わないプロパティは基本的にanimate関数で利用できません。例えば「color:#fff」などコードを使用するプロパティや「display:block」などの指定の文字列を使用するプロパティは、animate関数で利用できないため注意が必要です。
基本的にはと記載したのは、カラーコードのみ専用のプラグインを読み込めばanimate関数で利用が出来るようになるからです。
paramsの設定方法
//animate(params) function sample_ani1(){ $("#demo1").animate({left:"200px"}); }
複数のパラメータを指定するときは、「,」(カンマ)で区切ります。また「+(-)=」と記載すると値を加減算出来ます。
//animate(params) function sample_ani2(){ $("#demo2").animate({ left:"+=10px" ,width:"-=2px" ,opacity:0.7}); }
durationの指定方法
durationはアニメーションの速度を決めるための引数です。指定方法は2種類あり定義済みの文字かミリ秒で指定を行います。
定義済みの文字には、速度の遅い順に「slow」「normal」「fast」の3つがあります。
<a class="demobtn" onclick="sample_ani3('slow')">'slow'</a> <a class="demobtn" onclick="sample_ani3('normal')">'normal'</a> <a class="demobtn" onclick="sample_ani3('fast')">'fast'</a>
//animate(params, [duration]) function sample_ani3(duration){ if($("#demo3").css("left") == "0px"){ $("#demo3").animate({left:"200px"}, duration); } else{ $("#demo3").animate({left:"0px"}, duration); } }
//animate(params, [duration]) function sample_ani4(){ $("#demo4").animate({left:"+=50px"}, 500); }
callbackの使い方
callbackを利用すると関数の実行後に、別の関数を実行することが出来ます。
//animate(params, [duration], [callback]) function sample_ani5(){ $("#demo5").animate({left:"200px"}, 2000 , function(){ // 元の位置に戻す $("#demo5").animate({left:"0px"}, 2000); // divタグを消す $("#demo5").fadeOut(2000); }); }
easingの指定方法と種類
easingはエフェクトの動きを変化させることが出来ます。デフォルトの状態では、「linear」「swing」の2種類のみ使用が出来ます。
//animate(params, [duration], [easing]) //swing, linear function sample_ani6(){ $("#demo6").animate({left:"200px"}, 2000, "swing"); }
easingプラグインを使用すると32種類のエフェクト使用できるようになります。
<a class="demobtn" onclick="sample_ani7('easeInBounce')">'easeInBounce'</a> <a class="demobtn" onclick="sample_ani7('easeOutQuart')">'easeOutQuart'</a> <a class="demobtn" onclick="sample_ani7('easeInOutExpo')">'easeInOutExpo'</a>
//animate(params, [duration], [easing]) function sample_ani7(easing){ $("#demo7").animate({left:"200px"}, 2000, easing , function(){ $("#demo7").animate({left:"0px"}); }); }
‘easeInBounce’ ‘easeOutQuart’ ‘easeInOutExpo’
animete関数で色を変化させる方法
通常animate関数では色の変更には対応していませんが、jquery-colorプラグインを読み込ませることにより変更が出来るようになります。
//animate(params, [duration]) function sample_ani8(){ $("#demo8").animate({backgroundColor:"#f00"}, 3000); }
これでanimate関数の仕様と使い方の説明は終了です。ここまでの方法を組み合わせるとこのように独自のアニメーションを要素に与えることが出来るようになります。
Related Posts

« jQueryのバージョンを複数同時に使用する方法 要素を点滅させるjavascript & jQuery »
Trackback URL
http://webnonotes.com/javascript-2/jquery-animate/trackback/No Comments Yet