jQueryの動的クールエフェクト実装まとめ_jquery

jQuery には、動的でクールな効果を作成する上で大きな利点があります。ここでは、著者がまとめた最も一般的に使用される方法をいくつか紹介します。

1. インライン CSS を変更します
jQyery は、インライン CSS を取得または変更するための .css() メソッドを提供します
.css() メソッドが指定するパラメーター2 つのタイプがあります。1 つは別個のスタイル属性と値を渡す方法で、もう 1 つは「プロパティと値」のペアで構成されるマッピングを渡す方法です:
.css('property','value ' );
.css({'property1':'value1','property-2':'value2'});
一般に、数値は引用符で囲む必要はありませんが、文字列値は引用符で囲む必要はありません。ただし、マップされた表記法を使用する場合、プロパティ名にキャメルケース DOM 表記法が使用されている場合は引用符を省略できます。

2. アニメーション効果なしの基本的な非表示と表示
.hide()
.show()
これら 2 つのメソッドの機能は、すぐに非表示にすることです。一致する要素のセットを表示します。
3. 表示速度の非表示・表示を指定する
.hide() メソッドと .show() メソッドに基づいて、非表示または表示の速度を指定できます。その表現方法は、.hide('speed') または .show('speed') です。速度の値は次のとおりです:
遅い、通常、速い、遅いは 0.6 秒、速いは 0.2 秒
数値で表されるミリ秒値

4. フェードインとフェードアウト 効果
.fadein() 一致する要素のフェードイン効果を指定します
.fadeout() 一致する要素のフェードアウト効果を指定します
速度は、.fadein() または .fadeout() の値を使用して指定することもできます。次のような値: 遅い、標準、速い、ミリ秒
フェードインとフェードアウトの実装は、実際には不透明度を増減することです。一致する要素。

5. アニメーション効果を作成する jQuery は、複数の効果を含むカスタム アニメーションを作成できる強力な .animate() メソッドを提供します。 .animate() メソッドは、次の 4 つのパラメータを受け入れます:
スタイル属性と値を含むマップ。
オプションの速度パラメータ。デフォルトは通常です。
オプションのイージング タイプ
オプションのコールバック パラメーター。

6. .animate() を使用してアニメーションを作成する際に考慮すべき問題
変更したい要素に CSS によって課される制限 たとえば、要素が設定されていません。相対または絶対に設定されている場合、左属性を調整しても、一致する要素には影響しません。すべてのブロックレベル要素のデフォルトの CSS 位置プロパティは静的です。この値は、位置プロパティを変更する前に要素を移動しようとしても、要素は単に静止したままになることを正確に示しています。
同時実行性とキューイングの影響
jQuery で要素のグループを処理する場合でも、複数のグループを処理する場合でも、デフォルトではすべてが同時に発生します。したがって、同時実行性の問題は検討する価値のある問題になります。要約すると、次の 2 つのポイントがあります。
要素のグループを処理する場合は、コードの順序に従って制御できます。
複数の要素のグループを処理する場合は、次の方法で制御できます。コールバック関数。