このサンプルは、jQueryのhide()メソッドを利用して可視状態になっているhtml要素を不可視状態にします。サンプルの[show]-[hide]ボタンをクリックすると[show]ボタンで表示されてメッセージが消えます。
可視状態のhtml要素を不可視状態に切り替えるには、jQueryのhide()メソッドを使用します。ここでは、[hide]ボタンのクリック時のイベントハンドラでhide()メソッドを実行してspan要素を不可視状態(display:none)にしています。hide(speed)メソッドの引数1(speed)には、{"slow"|"normal"|"fast"}などが指定できます。また、このサンプルのように引数speedに時間(ミリセカンド)を指定することもできます。ここでは、2000(2秒)を指定して徐々に消えるようにしています。
$("#btnHide").click(function() {
$("span").hide(2000);
});
<button id="btnHide" type="button">Hide</button>
<br />
<span>Hello,</span>
<span>how</span>
<span>are</span>
<span>you?</span>