jQueryで要素に対してアニメーションをつけたい時は、animate()を使います。
このanimate()は、任意のアニメーション効果を作成するためのメソッドで、大きさ、幅、位置などを変化させることができます。
animate()を使ったアニメーション効果
|
1 |
.animate(パラメータ, [速度], [イージング], [コールバック]) |
animate()は、4つの引数をとります。パラメータでアニメーション効果、速度でアニメーションの速度、イージングでアニメーションの動き方、コールバックでアニメーションが終わった後の処理をそれぞれ指定します。
animate()では、第一引数のパラメータ以外はすべてオプションです。
指定できるパラメータ
パラメータには、要素を変化させるスタイルを指定します。スタイルはCSSのプロパティをキャメルケースで記述します。
例えば、 margin-leftは marginLeftと記述します。
なお、指定できるスタイルは、数値型の値をとるものだけです。
animate()をつかったサンプル
次からanimate()をつかったサンプルを紹介していきます。使用するHTMLを以下のもので、ボタンをクリックするとアニメーションが始まるサンプルを作成します。
*以下のサンプルはブラウザによって動作しない可能性があります。動かない場合は、Google Chromeで試してみてください。
|
1 2 |
<button id="button">ボタン</button> <div id="target">ターゲット</div> |
移動する
marginLeftを指定することで、横に動くサンプルです。あらかじめ、CSSでターゲットに対してpositionプロパティを指定していればtop,leftなどのプロパティも使用できます。
|
1 2 3 4 5 |
$("#button").on("click", function () { $("#target").animate({ "marginLeft": "100px" }); }); |
連続で移動する
メソッドチェーンと呼ばれるメソッドをつなげて記述することで、連続して動かすことも可能です。
|
1 2 3 4 5 6 7 |
$("#button").on("click", function () { $("#target").animate({ "marginLeft": "100px" }).animate({ "marginTop": "100px" }); }); |
透過するアニメーションの後にアラートを出す
引数に、 function(){処理}のように、コールバック関数を渡すことでアニメーションが終わった後の処理を記述できます。
|
1 2 3 4 5 6 7 8 |
$("#button3").on("click", function () { $("#target3").animate({ "opacity": "0" }, function(){ alert("消えました") }); }); |
このように、animation()を使うことで、CSSを指定するのと同じ間隔でさまざまなアニメーション効果を作成することができます。
