jQueryエフェクト - アニメーション
jQueryを使用すると、カスタムアニメーションを作成できます。
jQueryアニメーション - animate()メソッド
jQueryanimate()メソッドは、カスタムアニメーションを作成するために使用されます。
構文：
必須のparamsパラメータは、アニメーション化するCSSプロパティを定義します。
オプションの速度パラメーターは、エフェクトの持続時間を指定します。「"slow"」、「"fast"」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、アニメーションの完了後に実行される関数です。
次の例は、このanimate()メソッドの簡単な使用法を示しています。左のプロパティの250pxに達するまで、<div>要素を右に移動します。
デフォルトでは、すべてのHTML要素には静的な位置があり、移動できません。位置を操作するには、最初に要素のCSS位置プロパティを相対、固定、または絶対に設定することを忘れないでください。
jQuery animate() - 複数のプロパティを操作する
複数のプロパティを同時にアニメーション化できることに注意してください。
例
animate()メソッドですべてのCSSプロパティを操作することは可能ですか?
はい、ほとんどです！ただし、覚えておくべき重要な点が1つあります。animate()メソッドで使用する場合は、すべてのプロパティ名をキャメルケースにする必要があります。また、コアjQueryライブラリにはカラーアニメーションが含まれていません。カラーアニメーションを使用する場合は、jQuery.comからカラーアニメーションプラグインをダウンロードする必要があります。
jQuery animate() - 相対値の使用
相対値を定義することもできます(値は要素の現在の値に相対的です)。これは、値の前に+=または-=を置くことによって行われます。
例
jQuery animate() - 事前定義された値の使用
プロパティのアニメーション値を"show"、"hide"、また"toggle"として指定することもできます。
jQuery animate() - キュー機能を使用
デフォルトでは、jQueryにはアニメーションのキュー機能が付属しています。
つまり、複数書くとanimate()jQueryはこれらのメソッド呼び出しで「内部」キューを作成します。次に、アニメーション呼び出しを1つずつ実行します。
したがって、異なるアニメーションを次々に実行したい場合は、キュー機能を利用します。
例1
以下の例では、最初に<div>要素を右に移動し、テキストのフォントサイズを大きくします。
例2
jQueryエフェクトリファレンス
すべてのjQuery効果の完全な概要については、jQueryエフェクトリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。