jQuery が要素を表示および非表示にするさまざまな方法を探索します。

jQuery は、フロントエンド開発における対話とアニメーションを簡素化するために使用される人気のある JavaScript ライブラリです。一般的な使用法の 1 つは、DOM 要素の可視性を操作することです。この記事では、jQuery が要素を表示および非表示にするさまざまな方法を検討します。

要素の表示

まず、jQuery を使用して要素を表示する方法を見てみましょう。通常、次の 3 つのメソッドがあります:

.show()

最初に、.show() メソッドがあります。このメソッドは、非表示の要素に対して呼び出して、それを表示できます。たとえば、「myDiv」という要素を表示するには、.show() に加えて、

$("#myDiv").show();

.show(speed [, easing ] [, callback ] )

と記述できます。メソッド、パラメータ付きのバージョンもあります。このメソッドを通じて、表示アニメーションの速度とイージング効果を設定できます。たとえば、「myDiv」要素を「遅い」速度で表示するには、次のように記述します。

$("#myDiv").show("slow");

コールバック関数を使用する場合は、必ずイージング パラメータの後に定義してください。

.fadeIn()

.fadeIn(speed [, easing ] [, callback ] )

.fadeIn() メソッドは前のメソッドと似ていますが、要素はすぐには表示されませんが、フェードインします。このメソッドは、速度、イージング効果、コールバック パラメーターも受け取ることができます。たとえば、「myDiv」を「高速」でフェードインするには、次のように記述します。

$("#myDiv").fadeIn("fast");

.hide()

.show() メソッドは、要素を非表示状態から表示状態に変更します。 , .hide() メソッドはその逆を行います。このメソッドは要素を非表示に設定できますが、要素の位置やスペースは変更されません。たとえば、「myDiv」を非表示にするには、次のように記述できます。

$("#myDiv").hide();

.hide(speed [, easing ] [, callback ] )

.hide() メソッドは、speed とともに使用することもできます。 、.show() メソッドと同様の、イージング効果とコールバック パラメーター。たとえば、「遅い」速度で「myDiv」を非表示にするには、次のように記述します:

$("#myDiv").hide("slow");

.fadeOut()

.fadeOut(speed [, easing ] [, callback ] )

.fadeIn() メソッドと同様に、.fadeOut() メソッドもあります。要素をフェードアウトし、速度、イージング、コールバックのパラメーターを取得できます。たとえば、「myDiv」を「中」の速度でフェードアウトするには、次のように記述します。

$("#myDiv").fadeOut("medium");

要素の可視性の切り替え

.show() メソッドと .hide() メソッドを使用して表示できます。それぞれ要素を非表示にしますが、場合によっては要素の表示を完全に切り替える必要があります。このとき、 .toggle() メソッドを使用できます。

.toggle()

.toggle(speed [, easing ] [, callback ] )

.toggle() メソッドは、要素の表示と非表示を切り替えることができます。要素が表示されると非表示になり、その逆も同様です。このメソッドは、速度、イージング効果、コールバック パラメーターも受け取ることができます。たとえば、「myDiv」の表示/非表示を切り替え、コールバック関数でコンソール メッセージを出力するには、次のように記述します。

$("#myDiv").toggle("fast", function() {
  console.log("Toggled visibility of #myDiv.");
});

summary

この記事では、jQuery を制御するためのさまざまなメソッドを紹介しました。 .show()、.hide()、.fadeIn()、.fadeOut()、.toggle() などの要素の可視性。これらのメソッドは、スムーズなインタラクションとアニメーションを作成する便利な方法を提供すると同時に、フロントエンド開発の柔軟性と保守性も強化します。

以上がjQuery が要素を表示および非表示にするさまざまな方法を探索します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。