jQueryで移動するアニメーションなどを作成する：animate()

jQueryで要素に対してアニメーションをつけたい時は、animate()を使います。

このanimate()は、任意のアニメーション効果を作成するためのメソッドで、大きさ、幅、位置などを変化させることができます。

animate()を使ったアニメーション効果

.animate(パラメータ, [速度], [イージング], [コールバック])

animate()は、4つの引数をとります。パラメータでアニメーション効果、速度でアニメーションの速度、イージングでアニメーションの動き方、コールバックでアニメーションが終わった後の処理をそれぞれ指定します。

animate()では、第一引数のパラメータ以外はすべてオプションです。

指定できるパラメータ

パラメータには、要素を変化させるスタイルを指定します。スタイルはCSSのプロパティをキャメルケースで記述します。　

例えば、margin-leftはmarginLeftと記述します。

なお、指定できるスタイルは、数値型の値をとるものだけです。

animate()をつかったサンプル

次からanimate()をつかったサンプルを紹介していきます。使用するHTMLを以下のもので、ボタンをクリックするとアニメーションが始まるサンプルを作成します。

*以下のサンプルはブラウザによって動作しない可能性があります。動かない場合は、Google Chromeで試してみてください。

<button id="button">ボタン</button>
<div id="target">ターゲット</div>

移動する

marginLeftを指定することで、横に動くサンプルです。あらかじめ、CSSでターゲットに対してpositionプロパティを指定していればtop,leftなどのプロパティも使用できます。

$("#button").on("click", function () {
    $("#target").animate({
        "marginLeft": "100px"
    });
});

連続で移動する

メソッドチェーンと呼ばれるメソッドをつなげて記述することで、連続して動かすことも可能です。

$("#button").on("click", function () {
    $("#target").animate({
        "marginLeft": "100px"
    }).animate({
        "marginTop": "100px"
    });
});

透過するアニメーションの後にアラートを出す

引数に、function(){処理}のように、コールバック関数を渡すことでアニメーションが終わった後の処理を記述できます。

$("#button3").on("click", function () {
  $("#target3").animate({
    "opacity": "0"
  },
  function(){
    alert("消えました")
  });
});

このように、animation()を使うことで、CSSを指定するのと同じ間隔でさまざまなアニメーション効果を作成することができます。