jQueryの非表示/表示

 

 

jQuery 隐藏/表示要素：簡単にウェブページの内容表示を制御

このチュートリアルでは、jQueryでHTML要素を非表示にしたり、表示したりするために使用する `hide()`、`show()`、`toggle()` メソッドについて詳しく説明し、アニメーション速度やコールバック関数などの高度なオプションについても説明します。

1. jQuery hide() メソッド

定義

`hide()` メソッドは、HTML要素を非表示にするために使用されます。

構文

$(selector).hide(speed, callback);

パラメータ

  • speed: (オプション) 非表示アニメーションの速度を指定します。
    • "slow"、"fast"、またはミリ秒で指定できます。
    • 省略した場合は、アニメーションなしで要素がすぐに非表示になります。
  • callback: (オプション) 非表示アニメーションの完了後に実行される関数を指定します。

例:


// 段落をゆっくりと非表示にする
$("p").hide("slow");

// ボタンクリック時にdivを非表示にする
$("#myButton").click(function(){
  $("#myDiv").hide(function(){
    alert("div要素は非表示になりました！");
  });
});

2. jQuery show() メソッド

定義

`show()` メソッドは、以前に非表示にされたHTML要素を表示するために使用されます。

構文

$(selector).show(speed, callback);

パラメータ

  • speed: (オプション) 表示アニメーションの速度を指定します。
    • "slow"、"fast"、またはミリ秒で指定できます。
    • 省略した場合は、アニメーションなしで要素がすぐに表示されます。
  • callback: (オプション) 表示アニメーションの完了後に実行される関数を指定します。

例:


// 段落をすばやく表示する
$("p").show("fast");

// ボタンクリック時にdivを表示する
$("#myButton").click(function(){
  $("#myDiv").show(function(){
    alert("div要素は表示されました！");
  });
});

3. jQuery toggle() メソッド

定義

`toggle()` メソッドは、要素の現在の表示状態に基づいて、要素を表示または非表示にします。要素が現在表示されている場合は非表示になり、非表示になっている場合は表示されます。

構文

$(selector).toggle(speed, callback, state);

パラメータ

  • speed: (オプション) 表示/非表示アニメーションの速度を指定します。
    • "slow"、"fast"、またはミリ秒で指定できます。
    • 省略した場合は、アニメーションなしで要素がすぐに表示/非表示になります。
  • callback: (オプション) 表示/非表示アニメーションの完了後に実行される関数を指定します。
  • state: (オプション) 要素を表示するか非表示にするかを強制的に指定します。
    • `true` を指定すると要素が表示され、 `false` を指定すると非表示になります。

例:


// ボタンクリック時に段落の表示/非表示を切り替える
$("#myButton").click(function(){
  $("p").toggle();
});

// チェックボックスの状態に基づいてdivの表示/非表示を切り替える
$("#myCheckbox").change(function(){
  $("#myDiv").toggle(this.checked);
});

4. jQuery アニメーション効果

`hide()`、`show()`、`toggle()` メソッドは、アニメーション効果を作成するために速度パラメータをサポートしています。

値 説明
"slow" アニメーションをゆっくりとした速度で実行します。
"fast" アニメーションを速い速度で実行します。
ミリ秒 アニメーションの期間をミリ秒単位で指定します。

例:


// divを2秒かけて非表示にする
$("#myDiv").hide(2000);

// divを500ミリ秒かけて表示する
$("#myDiv").show(500);

5. コールバック関数

`hide()`、`show()`、`toggle()` メソッドは、アニメーションの完了後に実行される関数を指定するコールバック関数をサポートしています。

例:


// divを非表示にした後、アラートを表示する
$("#myDiv").hide("slow", function(){
  alert("div要素は非表示になりました！");
});

// divを表示した後、テキストコンテンツを変更する
$("#myDiv").show("fast", function(){
  $(this).text("表示されました！");
});

参考文献

Q&A

Q1: `hide()` メソッドと `show()` メソッドの違いは何ですか？

A1: `hide()` メソッドは要素を非表示にし、 `show()` メソッドは要素を表示します。 `hide()` メソッドで非表示にした要素は、 `show()` メソッドで再び表示できます。

Q2: `toggle()` メソッドはどのように動作しますか？

A2: `toggle()` メソッドは、要素の現在の表示状態に基づいて、要素を表示または非表示にします。要素が現在表示されている場合は非表示になり、非表示になっている場合は表示されます。

Q3: コールバック関数はいつ使用しますか？

A3: コールバック関数は、アニメーションの完了後に特定のコードを実行する必要がある場合に使用します。たとえば、要素を非表示にした後にアラートを表示したり、要素を表示した後にテキストコンテンツを変更したりできます。