jQuery エフェクト - Hide と Show

Hide、Show、Toggle、Slide、Fade、Animate。

パネル show/hide をクリック

時は金なりです。迅速かつ簡便な学習をお届けします。

W3Schools では、理解しやすく・使いやすい形式で、必要なすべてを学ぶことができます。

例

jQuery hide()
jQuery hide() メソッドの簡単なデモ。

jQuery hide()
別な hide() デモ。テキストの一部を非表示にする方法。

jQuery の hide() と show() メソッドにより、HTML 要素を表示したり非表示にしたりすることができます:

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

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

構文：

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

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

オプションの speed パラメータは、表示/非表示の速度を指定するもので、次の値が指定できます: "slow"、"fast"、ミリ秒。

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

次の例は、hide() に speed パラメータを使用した場合のデモです:

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

jQuery の toggle() メソッドにより、hide() と show() メソッドの間を切り替えることができます。

表示要素を非表示に、非表示要素を表示に切替えます:

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

構文：

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

オプションの speed パラメータには、次の値を指定できます: "slow"、"fast"、ミリ秒。

オプションの callback パラメータは、toggle() メソッドが完了した後に実行される関数です。

全 jQuery エフェクトの完全な概要については、jQuery エフェクト・リファレンスをご覧ください。