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