このページの本文へ

jQueryによるアニメーションエフェクトの基本

2009年09月17日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

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

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


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


 先ほどのshow()を使ったサンプル01に、hide()div要素を非表示にするボタンを追加したのが以下のサンプルです。表示ボタン(id属性がshowbutton要素)がクリックされるとshow()を、非表示ボタン(id属性がhidebutton要素)がクリックされると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
サンプル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()には、クリックされるたびに異なる処理を実行する機能もあります。詳しくはイベント処理の回(関連記事)を参照してください。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く