jQueryエフェクト-非表示と表示


非表示、表示、切り替え、スライド、フェード、およびアニメーション化。わお!

クリックしてパネルを表示/非表示

時間は貴重なので、迅速かつ簡単に学習できます。

W3Schoolsでは、アクセス可能で便利な形式で、学習する必要のあるすべてのものを学習できます。



単純なjQueryhide()メソッドを示します。


別のhide()デモンストレーション。テキストの一部を非表示にする方法。


jQueryhide()およびshow()

hide()jQueryを使用すると、 andshow()メソッドを使用してHTML要素を表示および非表示にできます。

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

構文:

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

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

オプションのspeedパラメーターは、非表示/表示の速度を指定し、「slow」、「fast」、またはミリ秒の値をとることができます。

オプションのコールバックパラメーターは、hide()orshow()メソッドの完了後に実行される関数です(コールバック関数の詳細については、後の章で説明します)。

次の例は、速度パラメータを次のように示していますhide()

$("button").click(function(){
  $("p").hide(1000);
});


jQueryのtoggle()

メソッドを使用して、要素の非表示と表示を切り替えることもできますtoggle()

表示されている要素は非表示で、非表示の要素が表示されています。

$("button").click(function(){
  $("p").toggle();
});

構文:

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

オプションの速度パラメータは、「slow」、「fast」、またはミリ秒の値を取ることができます。

toggle()オプションのコールバックパラメータは、完了後に実行される関数 です。


jQueryの演習

エクササイズで自分をテストする

エクササイズ:

jQueryメソッドを使用して、クリックされたときに<p>要素を非表示にします。

$("p").click(function(){
  $(this).();
});


jQueryエフェクトリファレンス

すべてのjQueryエフェクトの完全な概要については、 jQueryエフェクトリファレンスにアクセスしてください