jQuery animate（）メソッドのガイド

コアポイント

• jQueryのanimate()メソッドは、指定された期間にわたって要素のCSSプロパティを徐々に変更することにより、開発者がカスタムアニメーションを作成できる汎用性の高いツールです。
• animate()メソッドは、数値CSSプロパティにのみ適しており、パフォーマンスの問題が発生する可能性があるため、非常に複雑なアニメーションには適していません。
このメソッドには主に2つの形式があります：
• とanimate(properties[, duration][, easing][, callback])、そしてほとんどのパラメーターはオプションです。これらのパラメーターは、期間、緩和機能、アニメーションが完了した後に起こることなど、アニメーションの側面を制御します。 animate(properties[, options])
開発者は、複数のメソッドを一緒にリンクして、より複雑なアニメーションを作成し、アニメーションシーケンスを呼び出し順に実行できるようにすることができます。この機能は「キューイング」と呼ばれ、jQueryアニメーションの機能と柔軟性を高めます。
• animate()
jQueryは、長年にわたって何千もの開発者がプロ​​ジェクトを処理する方法を変えた優れたライブラリです。 jQueryを作成するとき、CSSは複雑なアニメーションを作成することができず、JavaScriptのみを使用できます。 JQueryは、この目的のためにいくつかの方法が作成されたため、アニメーションの大きな助けです。軽量に保つために、いくつかのシンプルなアニメーション（

、

、fadeIn()など）が付属していますが、ライブラリはアニメーションが必要なものを作成するための非常に柔軟な方法を提供します。これがこの記事の主題です。 jQueryのhide()はa slideDown()ラッパーメソッドanimate()です。つまり、jqueryによってラップされた以前に選択されたDOM要素のセットで動作します。この方法を使用すると、コレクションの要素に独自のカスタムアニメーション効果を適用できます。これを行うには、アニメーションの最後に到達するCSSスタイルのプロパティと値のセットを提供する必要があります。アニメーション効果中のスタイルの中間値（アニメーションエンジンによって自動的に処理されます）は、効果の持続時間と緩和機能によって決定されます。これについては、すぐに説明します。アニメーション化できるCSSスタイルの属性リストは、数値を受け入れるプロパティに限定されます。この値は、絶対値（たとえば、200）または開始点からの相対値にすることができます。絶対値の場合、jQueryは、ピクセルがデフォルト単位であると想定しています。また、EM、REM、パーセンテージなどの他のユニットを指定することもできます。相対値を指定するには、正または負の方向にそれぞれ相対的なターゲット値を示すようにanimate()または序文を前に付けなければなりません。 をある程度理解しているので、今度はその署名とパラメーターを調べる時が来ました。 = -=animate()署名とパラメーター

このメソッドには2つの主要なフォームがあり、そのパラメーターのほとんどはオプションです（通常の正方形の括弧で示されています）：

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options])

パラメーターについては、言うことがたくさんあります：

• properties（オブジェクト）：アニメーションの最後に到達する値を含むハッシュテーブル。
• duration（number | string）：効果持続時間（ミリ秒単位）または事前定義された文字列の1つ：「slow」（600ミリ秒）、「通常」（400ミリ秒）、または「高速」（200ミリ秒）。デフォルトは「通常」です。
• easing（文字列）：変換を実行するときに使用される緩和関数の名前。デフォルト値は「スイング」です。
• callback（関数）：各アニメーション要素のアニメーション時に実行される関数。
• options（オブジェクト）：メソッドに渡すオプションのセットを含むハッシュテーブル。利用可能なオプションは次のとおりです
  • （関数）：アニメーションが完了または停止したが完了していないときに呼び出される関数。 always
  • （関数）：アニメーションが完了した後に実行される関数。 complete
  • （関数）：アニメーションが完了した後に呼び出される関数。 done
  • （string | number）：上記と同じ。 duration
  • （文字列）：上記と同じ。 easing
  • （関数）：アニメーションが失敗したときに実行される関数。 fail
  • （関数）：アニメーションの各ステップの後に実行される関数。この関数は、アニメーション要素ごとに1回のみと呼ばれます。 progress
  • （ボレン）：アニメーションを効果キューに配置する必要がある場合（これについては後で詳しく説明します）。デフォルト値は真です。 queue
  • （オブジェクト）：値が緩和関数である1つ以上のCSSプロパティのハッシュテーブル。 specialEasing
  • （関数）：アニメーションの先頭に実行された関数。 start
  • （関数）：各アニメーション要素の各アニメーション属性を呼び出す関数。 step

easyという用語は、フレーム速度が処理され、アニメーション化される方法を説明するために使用されます。 オプションがtrueに設定されている場合、アニメーションを順番に実行し、falseに設定すると、アニメーションを並行して実行できます。これにより、私たちが好きなように使用できる多くの力が与えられます。この記事の残りの部分では、これらのパラメーターの実用的なアプリケーションをいくつか実証して、queueの可能性を体験できるようにします。 animate()

例の例の力を作成します。このアプローチは、アニメーションのパフォーマンスと流encyさに関連する問題のため、非常に複雑なアニメーションには適していないことを忘れないでください。

単一のアニメーションを実行します

animate()単一のアニメーションを実行するのは非常に簡単です。メソッドを一度呼び出すだけです。たとえば、箱の片側からもう一方の側に要素を移動したい場合があります。このアニメーションを説明するために、1つのdiv要素を他方の内側に設定します。内側のdivに赤い背景があるようにスタイルを整えます。これを行うコードは次のとおりです。 html：

<div class="rectangle">
  <div class="square-small"></div>
</div>

css：

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

animate()の力を使用して、小さな正方形を片側からもう一方に移動します。

このコードでは、アニメーション化される唯一の属性である

$('.rectangle')
  .find('.square-small')
  .animate({
    left: 280
  }, 'slow');

属性が属性であることを指定します。アニメーションの期間をプリセット値の遅い（600ミリ秒）に設定します。絶対値を使用して、内部

を移動します（クラスleft）。この値は、前述のCSSコードで設定したコンテナ幅に基づいています。このソリューションは、コンテナの幅を変更した場合、内部<div>が反対側に到達しないため（コンテナに幅が広い場合）、またはそれを超えるため（幅を超えた場合（幅が狭く設定した場合）、柔軟性がありません。 ）。 1つの解決策は、以下に示すように、外部および内部の幅の電流幅の計算に基づいて<code>.square-small属性の値を設定することです。 <div> <code><div>ループで複数のアニメーションを実行します<code>left 1つの要素または要素のグループで複数のアニメーションを実行することは、呼び出しをにリンクするのと同じくらい簡単です。この例では、小さな正方形が大きな正方形の内側の砂時計の周囲に沿って（長方形ではなく）移動するときに移動します。このデモを作成するには、次のタグを使用します。

left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()

スタイルの場合、

に使用したのと同じCSSと、最も外側の正方形のスタイルを設定するために次のスタイルを使用する必要があります。

animate()最後のステップは、JavaScriptコードを書き、理想的な砂時計の周囲を構成する4つの線を描画することです。最も外側の正方形の左上隅から始めて、大きな正方形の右下隅に到達するまで小さな正方形をアニメーション化する必要があります。小さな正方形は、効果を生成するために斜めに移動する必要があります。右下隅に到達したら、左下隅に移動する必要があります。その後、右上隅に到達し、最終的に元の位置に戻る必要があります。このデモを紹介する際に、無限のアニメーションを実行したいと言いました。そのため、最後のステップが完了したら、アニメーション全体を再度実行する方法を見つけなければなりません。これを行うには、1つの関数で4つのリンクされた

呼び出しにコールをラップすることができるため、参照する関数があります。その後、前述の

<div class="square-big">
  <div class="square-small"></div>
</div>

コールバックとIIFEを使用して、最後のステップが完了したら再びアニメーションを実行できます。この説明をコードに変換した結果は次のとおりです。

上記のコードでは、.square-small変数を使用する方法に注意してください。そうすれば、

を呼び出すときに同じパラメーターを何度も記述する必要がないようにしてください。また、最後に

.square-big {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

を使用したときに

コールバックを追加する必要があったため、jQueryのanimate()メソッドを使用しました。 complete

その他のコールバック操作

最後の例として、options、start、completeパラメーターのプロパティ（2番目のフォームの2番目のパラメーター）を設定します。目的は、アニメーションの実行中にクリックしたときにアニメーションを実行するボタンを無効にすることです。その後、アニメーションの完了率を示したいと思います。この例では、作成した最初のデモを変更します。説明によると、ボタンと要素（スパンを使用します）を追加して、パーセンテージを表示する必要があります。この変更により、次のタグが表示されます progress

スタイルを追加する必要はないので、JavaScriptコードの議論にジャンプできます。ボタンがクリックされたときにのみアニメーションを実行するには、ボタンのクリックイベントにハンドラーを追加する必要があります。ハンドラーの内部では、jQueryの

<div class="rectangle">
  <div class="square-small"></div>
</div>

メソッドを使用して、アニメーションが実行されているか完了しているかに基づいてボタンを無効にして有効にします。最後に、アニメーション完了の割合を表示するために、

オプションに接続されたハンドラーに渡された2番目のパラメーターを使用します。生成されたコードは次のようになります：prop() progress

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

結論

この記事では、jQueryの方法で何ができるかについて説明します。その署名と受け入れられたパラメーターを紹介します。この記事では、3つの例のアニメーションを調べます。この記事では、

の可能性を簡単に紹介します。実際、少し忍耐と創造性があれば、本当に複雑で美しいアニメーションを作成できます。

animate()animate()よくある質問（FAQ）

jQueryアニメートメソッドとは何ですか？それはどのように機能しますか？

JQuery Animateメソッドは、カスタムアニメーションを作成できる強力なツールです。要素のCSSプロパティを徐々に変更し、持続時間を指定することで機能します。任意のCSS属性をアニメーション化できますが、

の代わりに

などのキャメルケースを使用して属性を指定する必要があります。 Animateメソッドを使用すると、アニメーションの速度を制御する緩和関数と、アニメーションが完了した後に実行されるコールバック関数を指定することもできます。

marginLeft jqueryアニメーションを停止または一時停止する方法は？ margin-left

jQueryは、アニメーションを停止するためのA

メソッドを提供します。このメソッドは、選択した要素で現在実行されているアニメーションを停止します。アニメーションを一時停止したい場合は、JQueryがこのために組み込みの方法を提供していないため、もう少し複雑になります。ただし、プラグインを使用するか、アニメーションの進行状況を手動で制御することで行うことができます。

jQueryアニメーションアニメーションを使用して、複数のプロパティを一度に処理できますか？ stop()

はい、JQuery Animateメソッドを使用して、複数のCSSプロパティを一度にアニメーション化できます。すべてのプロパティを

オブジェクトにアニメーション化するだけで含める必要があります。たとえば、要素の幅と高さを同時にアニメーション化できます。

jQueryアニメートでステップ機能を使用するにはどうすればよいですか？

jQuery Animateのステップ関数は、アニメーションのすべてのステップで実行されるコールバック関数です。この関数は、アニメーションプロパティの現在の値である2つのパラメーターを渡します。これは、アニメーションに関する情報を含むオブジェクトです。ステップ関数を使用して、複雑なアニメーションを作成したり、アニメーションをデバッグできます。 now fx非数学的なCSSプロパティにjQueryアニメイトを使用できますか？

いいえ、jQueryアニメーションメソッドは、数値CSSプロパティにのみ適用できます。色や背景の色などの非数字のプロパティをアニメーション化しようとすると、機能しません。ただし、jQuery UIやjQuery Colorなどのプラグインを使用してこれらのプロパティをアニメーション化できます。

jQueryアニメイトを使用してアニメーションをリンクする方法は？

複数のアニメートメソッドを1つずつ呼び出すだけで、jQueryアニメーションをリンクできます。 jQueryは、コールの順にアニメーションを実行します。これは「キューイング」と呼ばれ、jQueryアニメーションの強力な特徴です。

jquery animateを使用してスライド効果を作成できますか？

はい、jQueryアニメートメソッドを使用してスライド効果を作成できます。これを行うことで、要素の高さまたは幅をアニメーション化できます。ただし、jQueryは

、

、slideDownメソッドも提供しています。これは、単純なスライド効果を作成するだけで使いやすいです。 slideUp slideToggle私のjQueryアニメーションをよりスムーズにする方法は？

jQueryアニメーションをよりスムーズにする方法は複数あります。 1つの方法は、アニメーションの速度を制御する緩和関数を使用することです。もう1つのアプローチは、ブラウザがアニメーションを最適化できるようにする

メソッドを使用することです。また、DOM操作の数を最小限に抑え、可能な場合はCSS変換を使用することでパフォーマンスを向上させることもできます。

requestAnimationFrame一連の要素でjQueryアニメートを使用できますか？

はい、一連の要素でjQueryアニメートメソッドを使用できます。複数の要素を持つjQueryオブジェクトのアニメートメソッドを呼び出すと、アニメーションはコレクション内のすべての要素に適用されます。

jQueryアニメートを使用してフェードエフェクトを作成する方法は？

、

、およびopacityメソッドも提供します。これは、単純なフェードエフェクトを作成するだけで使いやすいです。 fadeIn