jQuery.animate()関数の使用例を詳しく解説

animate() 関数は、CSS 属性に基づいてカスタム アニメーションを実行するために使用されます。

一致する要素の CSS スタイルを設定でき、animate() 関数は現在のスタイルから指定された CSS スタイルへの遷移アニメーションを実行します。

例: div 要素の現在の高さが 100px で、CSS の高さプロパティが 200px に設定されている場合、animate() は div 要素の高さを 100px から 200px まで徐々に増加させる遷移アニメーションを実行します。

この関数はjQueryオブジェクト(インスタンス)に属します。

構文

この関数は jQuery 1.0 の新しい関数です。 animate() 関数には主に次の 2 つの使用形式があります。

使用方法 1:

jQueryObject.animate( cssProperties [,duration ] [, easing ] [, complete ] )

使用方法 2:

jQueryObject.animate( cssProperties 、 options )

使用法 2 は、使用法 1 のバリエーションです。必要なオプションパラメータをオブジェクト形式で指定します（使用方法 1 よりも多くのオプションパラメータを指定できます）。

パラメータ

パラメータの説明

cssPropertiesオブジェクトクラス1つ以上のCSSプロパティのキーと値のペアで構成されるオブジェクトオブジェクト。

duration オプション/文字列/数値タイプは、アニメーションの実行時間 (ミリ秒数) を指定します。デフォルト値は 400 です。このパラメータには、string"fast"(=200) または "slow"(=600) を指定することもできます。

easing オプション/文字列タイプは、使用するアニメーション効果を指定します。デフォルトは「スイング」ですが、「リニア」またはその他のカスタマイズされたアニメーション スタイル関数に設定することもできます。

complete オプション/関数型要素は、関数が表示された後に実行する必要があります。関数内のこれは、現在の DOM 要素を指します。

options オブジェクトタイプで指定されたオプションパラメータオブジェクト。

パラメータ オプション オブジェクトは、次の属性を識別できます (以下の属性はオプションです):

属性 属性の説明

duration パラメータの期間を参照してください。

イージング パラメーターのイージングを参照してください。

complete 「パラメータの完了」を参照してください。

queue ブール型はアニメーションをエフェクトキューに入れるかどうかを示します。デフォルトは true です。バージョン 1.7 以降、このパラメータは、指定された名前でエフェクト キューに入れるために使用される文字列にすることができます。指定したキューが自動的に開始しない場合は、手動で dequeue("queueName") を呼び出してキューを開始する必要があります。

さらに、jQuery 1.4 および 1.8 では、パラメーター オプションの多くの新しいオプション サポートも追加されましたが、これらのパラメーターは一般的に使用されないため、ここでは説明しません。詳細については、jQuery の公式ドキュメントを参照してください。

戻り値

animate()関数の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。

例と説明

以下で説明する値を除き、アニメーション化されたすべての CSS プロパティは単一の値に変更できる必要があります。基本的な jQuery 機能を使用すると、ほとんどの非数値 CSS プロパティをアニメーションの実行に使用できません。例: width、height、left、top はすべてアニメーションに使用できますが、color、background-color はアニメーションに使用できません (jQuery.Color() プラグインを使用しない限り)。属性値の単位を指定しない限り (例: px、em、%)、デフォルト値の単位はピクセル (px) です。

border、margin などの短縮 css 属性は完全にはサポートされていない可能性があるため、使用はお勧めできません。

css 属性値を「show」、「hide」、「toggle」などの特定の文字列に設定することもできます。これにより、jQuery はこの属性のデフォルトのアニメーション フォームを呼び出します。

さらに、CSS 属性値は相対値にすることもでき、属性値の前に「+=」または「-=」を付けて、指定した値を元の属性値から増減させることもできます。例: { "height": "+=100px" } は、元の高さに 100px を追加することを意味します。

次の初期 HTML コードを参照してください:

CodePlayer

animation効果:

<select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
    <option value="5">动画5</option>
</select>
<input id="exec" type="button" value="执行动画" >

以下は、animate() 関数の具体的な使用法を示す、animate() 関数に関連する jQuery サンプル コードです。

以上がjQuery.animate()関数の使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。