jquery animateメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery animate()メソッド

animateメソッドは、セレクタで指定した要素のcssプロパティの値を変更してアニメーションするメソッドです
引数は4つあります
1つ目は変更するcssのプロパティと値を記述します。cssのプロパティにハイホンが入っているとマイナスと勘違いして処理されるのでハイホンを抜いて次の頭文字を大文字で記述します(最初の文字だけ大文字で記述することをキャメルケースといいます)。 margin-leftの場合は marginLeftと記述します。ちなみにjqueryのCSSプロパティは連想配列で記述されているので複数のcssプロパティの値を変更できます。例えば{marginLeft: "20px", fontSize: "1em"}などカンマで区切れば何個でも指定できます

2つ目がアニメーションスピードを数字で指定します。1秒が1000です。2秒が2000でアニメーションが完了します
※第2引数の値には数字の他に"fast"、"normal"、"slow"などの文字列も指定できますfastが200、slowが600、normalが400

3つ目がイージングの方法を指定します。イージングとは動きを加速などの運動のことです。値にはlinear(一定の増加量)、swing(加速しながら増加)のどちらかを設定します。文字列なのでダブルクォークションで値を囲います

4つ目の引数でコールバック関数を指定できます。コールバック関数とはアニメーションが終わったら実行される処理です。連続して動きをつけることができます

3つ引数を指定する場合

$("セレクタ").animate(cssプロパティと値,スピード,イージング);

4つ引数を指定する場合

$("セレクタ").animate(cssプロパティと値,スピード,イージング,コールバック関数);

4つ引数を指定する例

$("セレクタ").animate({marginLeft:"5px"},1000,"linear",function(){
	アニメーションが終わったあとに実行される処理
});

キューに登録しない方法

$("セレクタ").animate({cssプロパティ:値},{ duration: スピード,queue: false });

指定したHTML要素にcssプロパティの値を変更してアニメーションする

ボタンをクリックすると指定したdiv要素を2秒で設定した横幅と高さになり、文字は小さくなります

jquery

$(function() {
 $("button").click(function(){
 $("div#hoge").animate({width: "500px", height: "500px", fontSize: "1em"},2000,"linear");
 });
});
css
#hoge{
 background-color: #FFCC99;
 width: 250px; height: 250px;
 font-size: 2em;
 }

html

<div id="hoge"></div>
<button>ボタン</button>

サンプル

animate()します






(C)2012 ホームページ作成無料