jQueryのshow()とhide()が最もよく使用されるエフェクトです。

  1. show() – 一致する要素を表示します.

  2. hide() – 一致する要素を非表示にします.

どちらの方法も、パラメータとしてのサポート時間(slow、fast、またはexact milliseconds)です。このパラメーターを省略すると、デフォルトの400ミリ秒が適用されます。

自分で試してみてください

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
    p{
        padding:8px;
        margin:16px;
        border:1px solid blue;
        width:250px;
        height:50px;
        background-color:#999999;
        color:white;
    }
</style>

</head>

<body>

<h1>jQuery show() and hide() example</h1>

<p>Hello, this show() and hide() example</p>

<button id=show>show()</button>
<button id=hide>hide()</button>
<button id=reset>Reset</button>

<script type="text/javascript">

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

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

$("#reset").click(function(){
    location.reload();
});
</script>

</body>
</html>