Web制作の現場で使えるjQuery　UIデザイン入門 ― 第11回

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();

【実務でハマる落とし穴】

アニメーションが止まらない！ を解決する

　サンプル03は、実用上、ちょっとした問題があります。show() や hide()は1回のアニメーション処理が終わってから次のアニメーションを実行するため、表示／非表示ボタンをすばやく交互に何度もクリックすると、クリックした回数分のアニメーションが終了するまでしばらく待たなければならないのです。

　この問題を解決するのに便利なのが、jQueryのフィルター「:animated」です。:animatedはアニメーション処理中の要素を選択できるセレクターです。:not()と組み合わせて :not(:animated) と記述すると、“アニメーション処理中ではない要素”（アニメーションしていない要素）を絞り込めます。

　サンプル03を以下のように変更してみましょう。show()／hide()のセレクターに注目してください。

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

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

　この場合、show()／hide()はdiv要素がアニメーションしていない時だけ実行され、アニメーション中の場合は実行されません。これなら、表示／非表示ボタンをすばやく交互にクリックしても、アニメーションが終了するまで待つ必要はありません。

要素の表示／非表示を交互に切り替える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()には、クリックされるたびに異なる処理を実行する機能もあります。詳しくはイベント処理の回（関連記事）を参照してください。