【jQuery】animate関数の仕様と使い方jQueryではjavascriptで出来なかったエフェクトの実装が簡単に出来るようになりました。中でも要素にアニメーションを付加するanimate関数は、他のものとは違い自作のアニメーションが作れる関数です。animate関数の使い方を覚えれば自分の好みに合ったアニメーションが作れ、Webページをよりリッチなものと出来ます。今回はこのanimete関数の使い方と仕様をまとめましたので紹介します。]で括られている引数は省略可能です。animate関数は指定したパラメータによって、形や動きにアニメーションを与えることが出来ますが、全てのプロパティが使用できるわけではありません。利用できるプロパティanimate関数で利用できるプロパティは数値を扱うプロパティのみとなります。「left:100px;」や「width:100px」「opacity:0.5」などが対象となります。利用できないプロパティ数値を扱わないプロパティは基本的にanimate関数で利用できません。「color:#fff」などコードを使用するプロパティや「display:block」などの指定の文字列を使用するプロパティは、animate関数で利用できないため注意が必要です。基本的にはと記載したのは、カラーコードのみ専用のプラグインを読み込めばanimate関数で利用が出来るようになるからです。複数のパラメータを指定するときは、「,」(カンマ)で区切ります。「+(-)=」と記載すると値を加減算出来ます。opacity:0.7});}DEMOdurationの指定方法durationはアニメーションの速度を決めるための引数です。指定方法は2種類あり定義済みの文字かミリ秒で指定を行います。定義済みの文字には、速度の遅い順に「slow」「normal」「fast」の3つがあります。500);}DEMOcallbackの使い方callbackを利用すると関数の実行後に、別の関数を実行することが出来ます。});}DEMOeasingの指定方法と種類easingはエフェクトの動きを変化させることが出来ます。デフォルトの状態では、「linear」「swing」の2種類のみ使用が出来ます。"swing");}DEMOプラグインで利用できるeasingeasingプラグインを使用すると32種類のエフェクト使用できるようになります。通常animate関数では色の変更には対応していませんが、jquery-colorプラグインを読み込ませることにより変更が出来るようになります。3000);}DEMOこれでanimate関数の仕様と使い方の説明は終了です。ここまでの方法を組み合わせるとこのように独自のアニメーションを要素に与えることが出来るようになります。コメントをキャンセルメールアドレスが公開されることはありません。MyThemeShop。