animate を使用して jQuery でアニメーションをカスタマイズする方法

アニメーション animate()

01. animate() メソッドの簡単な使い方

以前に学習したいくつかのアニメーション関数では実現できない複雑なアニメーションもあります、今回は強力な animate メソッドです。

要素を操作して 3 秒間のフェードイン アニメーションを実行し、2 つのアニメーション設定の違いを比較します。

$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)

明らかに、animate メソッドはより柔軟で、スタイル属性を正確に制御してアニメーションを実行できます。

構文:

1 .animate(properties [,duration ] [,easing ] [,complete ] )

2 .animate(properties, options )

.animate() メソッドを使用すると、任意の値を追加できますCSS プロパティにアニメーションを作成します。 2 つの構文はほぼ同じです。必要な属性は、CSS 属性のキーと値のペアのセットだけです。このプロパティのセットは、.css() メソッドの設定に使用されるプロパティのキーと値のペアに似ていますが、プロパティのスコープがより制限されている点が異なります。 2 番目のパラメータに関しては、複数の実パラメータを個別に渡すことも、1 つのオブジェクトに組み合わせて渡すこともできます。

パラメータ分解:

properties: 1 つ以上の CSS プロパティのキーと値のペアで構成される Object オブジェクト。特に明記されていない限り、アニメーションに使用されるすべてのプロパティは数値である必要があることに注意することが重要です。数値でない場合、これらのプロパティは基本的な jQuery 機能を使用できません。たとえば、一般的なボーダー、マージン、パディング、幅、高さ、フォント、左、上、右、下、wordSpacing などはすべてアニメーション効果を生成できます。背景色は、パラメータがプラグインにとって非常に便利な赤や GBG などの値であるため、明らかに不可能です。そうでない場合、通常の状況ではアニメーション効果を実現できません。 CSS スタイルは、CSS 名 (「font-size」など) ではなく、DOM 名 (「fontSize」など) を使用して設定されることに注意してください。

単位に特に注意してください。特に指定がない限り、属性値の単位はピクセル (px) です。単位 em と % は、

.animate({
left: ,
width: 'px'
opacity: 'show',
fontSize: "em",
}, );

を使用して指定する必要があります。値の定義に加えて、各属性では「表示」、「非表示」、および「切り替え」を使用できます。これらのショートカットを使用すると、カスタムの非表示および表示アニメーションで要素の表示または非表示を制御できます

.animate({
width: "toggle"
});

+= または -= で始まる値が指定されている場合、ターゲット値は、この属性の現在の値に加算するか、次の方法で計算されます。指定された数値を減算します

.animate({
left: '+50px'
}, "slow");

duration: 時間

アニメーションが実行される時間、期間はミリ秒単位です。値が大きいほど、アニメーションの実行は速くなります。また、それぞれ 200 ミリ秒と 600 ミリ秒の継続時間を示す「fast」文字列と「slow」文字列を提供することもできます。
イージング アニメーション モーション アルゴリズム:

スイングを呼び出すときのデフォルトは jQuery ライブラリです。一定の速度でアニメーション化します。他のアニメーション アルゴリズムが必要な場合は、関連するプラグインを探してください。

完全コールバック

アニメーションが完了したと判断された後に実行される関数です。 be completed

02. 複数のアニメーションを順番に実行するanimate()メソッド

animateがアニメーションを実行しているときに、アニメーションの実行条件を観察したり、アニメーション中の特定の瞬間に他の処理を実行する必要がある場合、animate を通じて 2 番目のメソッドを提供できます。構文を設定し、オブジェクト パラメーターを渡して、アニメーションの実行ステータスに関する通知を取得します。

.animate(properties, options )

options パラメータ

duration - アニメーションの実行時間を設定します
easing - 使用するイージング関数、トランジションに使用するイージング関数を指定します
step: の各ステップの完了を指定します各アニメーション 後で実行される関数
progress: このコールバックはアニメーションが呼び出されるたびに実行され、進行状況の概念です
complete: アニメーションが完了したコールバック

複数の要素がアニメーションを実行する場合、コールバックが実行されますアニメーション全体として 1 回実行するのではなく、一致する要素ごとに 1 回実行します

よく使用されるメソッドをリストします

$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: ,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after(&#39;<div>Animation complete.</div>&#39;);
}
});

animate() メソッドを呼び出してカスタム アニメーション効果を作成します。呼び出し形式は次​​のとおりです:

$ (selector).animate({params },speed,[callback])

このうち、paramsパラメータはアニメーション効果を作成するためのCSSプロパティの名前と値、speedパラメータはアニメーション効果の速度です、ミリ秒単位で指定され、オプションのコールバック パラメータはアニメーションの完了時に実行されるコールバックです。

たとえば、下の図に示すように、animate() メソッドを呼び出して、小さいアニメーション効果から大きいアニメーション効果まで画像を表示します。 Out の図からわかるように、animate() メソッドを呼び出して、アニメーション効果が徐々に拡大する画像要素を表示します。アニメーションが完了すると、コールバック関数によって