コアポイント

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

、

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

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

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

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

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

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

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

単一のアニメーションを?qū)g行します

animate()単一のアニメーションを?qū)g行するのは非常に簡(jiǎn)単です。メソッドを一度呼び出すだけです。たとえば、箱の片側(cè)からもう一方の側(cè)に要素を移動(dòng)したい場(chǎng)合があります。このアニメーションを説明するために、1つのdiv要素を他方の內(nèi)側(cè)に設(shè)定します。內(nèi)側(cè)の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()の力を使用して、小さな正方形を片側(cè)からもう一方に移動(dòng)します。

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

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

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

を移動(dòng)します（クラスleft）。この値は、前述のCSSコードで設(shè)定したコンテナ幅に基づいています。このソリューションは、コンテナの幅を変更した場(chǎng)合、內(nèi)部<div>が反対側(cè)に到達(dá)しないため（コンテナに幅が広い場(chǎng)合）、またはそれを超えるため（幅を超えた場(chǎng)合（幅が狹く設(shè)定した場(chǎng)合）、柔軟性がありません。 ）。 1つの解決策は、以下に示すように、外部および內(nèi)部の幅の電流幅の計(jì)算に基づいて.square-small屬性の値を設(shè)定することです。 <div> <div>ループで複數(shù)のアニメーションを?qū)g行しますleft 1つの要素または要素のグループで複數(shù)のアニメーションを?qū)g行することは、呼び出しを

にリンクするのと同じくらい簡(jiǎn)単です。この例では、小さな正方形が大きな正方形の內(nèi)側(cè)の砂時(shí)計(jì)の周囲に沿って（長(zhǎng)方形ではなく）移動(dòng)するときに移動(dòng)します。このデモを作成するには、次のタグを使用します。

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

スタイルの場(chǎng)合、

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

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

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

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

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

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

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

.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番目のパラメーター）を設(shè)定します。目的は、アニメーションの実行中にクリックしたときにアニメーションを?qū)g行するボタンを無効にすることです。その後、アニメーションの完了率を示したいと思います。この例では、作成した最初のデモを変更します。説明によると、ボタンと要素（スパンを使用します）を追加して、パーセンテージを表示する必要があります。この変更により、次のタグが表示されます progress

スタイルを追加する必要はないので、JavaScriptコードの議論にジャンプできます。ボタンがクリックされたときにのみアニメーションを?qū)g行するには、ボタンのクリックイベントにハンドラーを追加する必要があります。ハンドラーの內(nèi)部では、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;
}

結(jié)論

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

の可能性を簡(jiǎn)単に紹介します。実際、少し忍耐と創(chuàng)造性があれば、本當(dāng)に複雑で美しいアニメーションを作成できます。

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

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

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

の代わりに

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

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

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

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

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

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

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

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

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

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

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

複數(shù)のアニメートメソッドを1つずつ呼び出すだけで、jQueryアニメーションをリンクできます。 jQueryは、コールの順にアニメーションを?qū)g行します。これは「キューイング」と呼ばれ、jQueryアニメーションの強(qiáng)力な特徴です。

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

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

、

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

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

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

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

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

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

、

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

以上がjQuery animate（）メソッドのガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。