jQueryによるアニメーションエフェクトの基本 (2/5)

• 
• ツイートする

表示中の要素を非表示状態にするhide()

　hide()はshow()の逆の働きをする命令です。表示状態のHTML要素、つまりCSSのdisplayプロパティがblockに設定されている要素を非表示（display:none;）に変更します。show()と同じく、hide(...)の括弧内にはアニメーションのスピードとコールバック関数を設定でき、指定したスピードで透明度、サイズ（高さ／幅）を変化させながら要素を非表示にします。

$(セレクター).show(スピード,コールバック関数);

　先ほどのshow()を使ったサンプル01に、hide()でdiv要素を非表示にするボタンを追加したのが以下のサンプルです。表示ボタン（id属性がshowのbutton要素）がクリックされるとshow()を、非表示ボタン（id属性がhideのbutton要素）がクリックされるとhide()を実行し、div要素の表示／非表示を切り換えます。

▼サンプル03（スクリプト部分）

$(function(){
    $("button#show").click(function(){
        $("div").show("slow");
    })
    $("button#hide").click(function(){
        $("div").hide("slow");
    })
})

▼サンプル03（HTML部分）

<button id="show">表示</button>
<button id="hide">非表示</button>
<div></div>

▼サンプル03（実行結果）

サンプル03の実行画面。要素が少しずつ縮小しながら非表示になる

　show()と同様に、括弧内のスピードの指定を省略するとアニメーション処理をせず、即座に要素を非表示にします。

$("div").hide();

$(function(){
    $("button#show").click(function(){
        $("div:not(:animated)").show("slow");
    })
    $("button#hide").click(function(){
        $("div:not(:animated)").hide("slow");
    })
})

要素の表示／非表示を交互に切り替えるtoggle()

　toggle()は、要素の表示／非表示を交互に切り換える命令です^（※）。セレクターで指定した要素が表示されている場合は非表示に、非表示の場合は表示状態に変更します。show()／hide()と同様、toggle(...)の括弧内にはアニメーションのスピードとコールバック関数を指定できます。

$(セレクター).toggle(スピード,コールバック関数);

　以下は、button要素がクリックされるたびに、div要素の表示／非表示を交互に切り換えるサンプルです。

▼サンプル04（スクリプト部分）

$(function(){
    $("button").click(function(){
        $("div:not(:animated)").toggle("slow");
    })
})

▼サンプル04（HTML部分）

<button>表示・非表示</button>
<div></div>

（※）toggle()には、クリックされるたびに異なる処理を実行する機能もあります。詳しくはイベント処理の回（関連記事）を参照してください。