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

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

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

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

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

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

指定できるパラメータ

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

例えば、 margin-leftmarginLeftと記述します。

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

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

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

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

移動する

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

ターゲット

連続で移動する

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

ターゲット

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

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

ターゲット

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集